Qt 5.0 Programming VI : Element Image and Animation part I

          เรื่องการโหลดภาพและการทำ Animation 2D ด้วย QML นั้นง่ายมากๆ แค่ไม่กี่บรรทัดก็สามารถทำสร้าง Animation ที่สวยและน่าสนใจได้อย่างรวดเร็ว

          Element Image คือ element หลักที่ใช้ในการแสดงภาพ propreties ที่สำคัญของ element นี้คือ properties "source" โดยที่ source อาจจะเป็นชื่อภาพ ซึ่งจะเป็นภาพที่อยู่ในเครื่องหรือเรียกจาก http ก็ได้ เช่น

source: "my_local_image.png"

source: "c:\image\my_local_image.png"

source: "http://miiniq.blogspot.com/my_net_image.png"

          ถ้าต้องการเรียกใช้งานภาพแบบที่เรียกชื่อภาพอย่างเดียวภาพที่เรียกใช้งานนั้นจะต้องอยู่ใน directory เดียวกับ file.qml ที่เรียกภาพนั้น

          ส่วนเรื่องเกี่ยวกับ Animation นั้นมีหลายรูปแบบ วันนี้จะนำมาเขียนก่อน 1 รูปแบบคือเรื่องของ NumberAnimation ที่ทำ animation กับ properties ของ element ที่เป็นตัวเลข เช่น width height scale opacity x y เป็นต้น การใช้งานหลักๆ เป็นดังนี้

จะต้องบอกว่าจะทำ animation กับ properties อะไร ตั้งแต่ค่าเท่าไหร่(Number1) ถึงเท่าไหร่(Number2) และระยะเวลาที่ทำ Animation เป็นเวลาเท่าไหร่(TimeInMilliSec) จาก Number1 ถึง Number2 และ element NumberAnimation จะต้องอยู่ภายใน element ที่ต้องการจะทำ animation นั้นๆ

	/*
	Element Image and Animation part I (NumberAnimation)
	Author : MaIII Themd
	Website : http://miiniq.blogspot.com
	FB : http://www.facebook.com/PiShared
	Env : Qt 5.0.2 clang 64 bit OSX 10.8.4
	*/
	import QtQuick 2.0
	Rectangle {
	id : rec_main;
	width: 750
	height: 400
	color: "pink"
	Image {
	id: img
	x:0;y:0;
	scale: 0.8;
	source: "./roter_mini.png"
	NumberAnimation on x {
	from: 0; to: 480
	duration: 1000
	}
	NumberAnimation on scale {
	from: 0.8; to: 0.2
	duration: 1000
	}
	}
	}

view raw image_animation_I.qml hosted with ❤ by GitHub

จาก code ข้างบนเป็นการทำ NumberAnimation กับ properties x และ scale โดยที่ x เปลี่ยนจาก 0 เป็น 480 และ scale เปลี่ยนจาก 0.8 เป็น 0.2  และทั้ง 2 Animation จะทำงานแบบขนานกันที่เวลา 1000 mSec หรือ 1 วินาที .... ถึงตรงนี้เป็นยังไงครับ ง่ายฝุดๆ เลยป่ะครับ ^^

<< Qt 5.0 Programming V : Element ID and Navigating the Objects Tree
>> Qt 5.0 Programming VII : Animation part II