Qt 5.0 Programming VII : Animation part II

          วันนี้มาบอกเรื่องการใช้งาน Animation หลักๆ ใน QML กันครับโดยแบ่งเป็น 2 ส่วนหลักๆ คือ

1. การกำหนด Animation ให้กับ property ต่างๆ ของ element ซึ่งจะมีใช้งานหลักๆ มี 2 อย่างคือ 

1. NumberAnimation ซึ่งส่วนนี้อยู่ในบทความในเรื่อง Animation part I แล้วขอไปกล่าวถึงครับ
2. PropertyAnimation  จะเป็น animation ที่ ทำงานเกียวกับ property ของ element ได้ทั้งหมด ซึ่งการใช้งานจะคล้ายๆ กับ NumberAnimation การใช้งานจะต้องบอก target ว่าจะทำงานกับ element อะไร กำหนด properties ที่จะทำ animation เช่น width height หรือแม้กระทั่ง color  เช่น
   
   
   
   
   
   
   
   NOTE : properties running คือสั่งให้รันเลยหรือไม่
   

2. การกำหนดให้ Animation ทำงานสามารถกำหนดได้ 2 แบบ คือ

1. การทำงานแบบ Parallel หรือแบบขนาด เช่นหากเราต้องการทำ animation ให้กับ element Rectangle โดยให้ขนาดและสีเปลี่ยนพร้อมกันเราต้องใส่ element ParallelAnimation ครอป PropertyAnimation หรือ NumberAnimation (หรือจะไม่ใส่ก็ได้เพราะว่า default ของการทำ Animation จะเป็นแบบ Parallel อยู่แล้ว) เช่น
   
   
   

   	/*
   	QML Animation
   	- NumberAnimation
   	- PropertyAnimation
   	- SequentialAnimation
   	- ParallelAnimation
   	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 {
   	width: 500; height: 500;
   	color: "lightblue"
   	Rectangle {
   	id: rectangle1
   	x: 0; y: 0; color: "green"
   	ParallelAnimation {
   	PropertyAnimation {
   	target: rectangle1
   	properties: "width,height"
   	from: 0; to: 500;
   	duration: 2000;
   	}
   	PropertyAnimation {
   	target: rectangle1
   	properties: "color"
   	from: "white"; to: "black";
   	duration: 3000;
   	}
   	running: true
   	}
   	}
   	}

   view raw qml_parallel_ani.qml hosted with ❤ by GitHub
2. การทำงานแบบ Sequential หรือการทำงานเป็นลำดับ เช่น หากต้องการให้ element rectangle ขยายจาก width 0 height 0 เป็น width 500 และ height 500 และหลังจากนั้นค่อยเปลี่ยนสีจากสีขาวเป็น สีดำ เช่น
   
   
   

   	/*
   	QML Animation
   	- NumberAnimation
   	- PropertyAnimation
   	- SequentialAnimation
   	- ParallelAnimation
   	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 {
   	width: 500; height: 500;
   	color: "lightblue"
   	Rectangle {
   	id: rectangle1
   	x: 0; y: 0; color: "white"
   	SequentialAnimation {
   	PropertyAnimation {
   	target: rectangle1
   	properties: "width,height"
   	from: 0; to: 500;
   	duration: 2000;
   	}
   	PropertyAnimation {
   	target: rectangle1
   	properties: "color"
   	from: "white"; to: "black";
   	duration: 3000;
   	}
   	running: true
   	}
   	}
   	}

   view raw qml_sequential_animation.qml hosted with ❤ by GitHub
   
   

<< Qt 5.0 Programming VI : Element Image and Animation part I
>> Qt 5.0 Programming VIII : Element FontLoader