Basic Animation in QML - Revision history

Hamishwillee: Text replace - "`" to ""`


2012-10-11T01:16:03Z
Text replace - "<code cpp>" to "<code cpp-qt>"

			
			
			
			
		
		← Older revision
		Revision as of 01:16, 11 October 2012
		
Line 36:
Line 36:
             
  Here we will link the default animation to when a property changes, so we will make a rectangle that follows the mouse click. This can be achieved by adding [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] elements and adding a {{Icode|MouseArea}} like below.   Here we will link the default animation to when a property changes, so we will make a rectangle that follows the mouse click. This can be achieved by adding [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] elements and adding a {{Icode|MouseArea}} like below.
− <code cpp> + <code cpp-qt>
  import QtQuick 1.0   import QtQuick 1.0
  Item {   Item {
Line 58:
Line 58:
  By changing the {{Icode|PropertyAnimation}} we can bring a bit of easing effect in our rectangle like this   By changing the {{Icode|PropertyAnimation}} we can bring a bit of easing effect in our rectangle like this
           
− <code cpp> + <code cpp-qt>
  Behavior on x {   Behavior on x {
  PropertyAnimation {   PropertyAnimation {



Hamishwillee: Hamishwillee - Bot update - Add ArticleMetaData
2012-07-24T07:26:31Z
Hamishwillee - Bot update - Add ArticleMetaData

			
			
			
			
		
		← Older revision
		Revision as of 07:26, 24 July 2012
		
Line 1:
Line 1:
  [[Category:Qt]][[Category:Qt Quick]]   [[Category:Qt]][[Category:Qt Quick]]
− {{ArticleMetaData + {{ArticleMetaData <!-- v1.2 -->
− |id= + |sourcecode= [[Media:AnimationQt.zip]] 
− |platform=Symbian + |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
− |devices=N8 + |devices= N8
− |category=QML + |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
− |subcategory= UI + |platform= Symbian
  + |devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
  + |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
  + |signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
  + |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
  + |keywords= Animation
  + |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
  + |translated-by= <!-- [[User:XXXX]] -->
  + |translated-from-title= <!-- Title only -->
  + |translated-from-id= <!-- Id of translated revision -->
  + |review-by= <!-- After re-review: [[User:username]] -->
  + |review-timestamp= <!-- After re-review: YYYYMMDD -->
  + |update-by= <!-- After significant update: [[User:username]]-->
  + |update-timestamp= <!-- After significant update: YYYYMMDD -->
  |creationdate= 17th May, 2011   |creationdate= 17th May, 2011
− |keywords= Animation + |author= [[User:Somnathbanik]]
−   + <!-- The following are not in current metadata -->
− |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) --> + |subcategory= UI
− |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> + 
− |sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> + 
− |devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) --> + 
− |signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer --> + 
− |capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) --> + 
− |author=[[User:Somnathbanik]] + 
  }}   }}
             
Line 23:
Line 30:
  ==Basic Idea==     ==Basic Idea==  
           
− We will create an example that displays a rectangle with colors. When we click on  the screen the rectangle moves with easing effects and animated to where the mouse is clicked. + We will create an example that displays a rectangle with colors. When we click on the screen the rectangle moves with easing effects and animated to where the mouse is clicked.
               
− [[Image:AnimationQt.png|120x320px]]   + [[File:AnimationQt.png|120x320px]]  
  {{Note| This is a very basic animation in QML for beginners}}   {{Note| This is a very basic animation in QML for beginners}}
             
Line 49:
Line 56:
  The [http://doc.qt.nokia.com/4.7/animation-easing.html Easing] property of animations has a number of attributes that control   The [http://doc.qt.nokia.com/4.7/animation-easing.html Easing] property of animations has a number of attributes that control
  how the value should be varied.   how the value should be varied.
− By changing the {{Icode|PropertyAnimation}} we can bring a bit of easing effect in our rectangle  like this + By changing the {{Icode|PropertyAnimation}} we can bring a bit of easing effect in our rectangle like this
           
  <code cpp>   <code cpp>
Line 79:
Line 86:
  ==Related Articles on Animation==   ==Related Articles on Animation==
    
− * http://www.developer.nokia.com/Community/Wiki/index.php/Qt_Kinetic_Animations_with_Buttons + *[[index.php/Qt Kinetic Animations with Buttons]]
− * http://www.developer.nokia.com/Community/Wiki/index.php/Simple_Animation_using_QML   + *[[index.php/Simple Animation using QML]]  
− * http://www.developer.nokia.com/Community/Wiki/index.php/Twisted_Carousel_Animation_with_the_Qt_graphics_view_framework + *[[index.php/Twisted Carousel Animation with the Qt graphics view framework]]
− * http://www.developer.nokia.com/Community/Wiki/index.php/CS001629_-_Implementing_parent_change_animation_with_QML   + *[[index.php/CS001629 - Implementing parent change animation with QML]]  
− * http://www.developer.nokia.com/Community/Wiki/index.php/CS001628_-_Implementing_of_fading_animation_with_QML + *[[index.php/CS001628 - Implementing of fading animation with QML]]
− * http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application + *[[index.php/CS001556 - Enabling Qt Animation Framework in an application]]
−   + 
  --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo Harmattan]] [[Category:Symbian]]   --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo Harmattan]] [[Category:Symbian]]
  + [[Category:Code Examples]]




Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"
2012-06-13T10:51:26Z
Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

			
			
			
			
		
		← Older revision
		Revision as of 10:51, 13 June 2012
		
Line 86:
Line 86:
  * http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application   * http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application
    
− --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo]] [[Category:Symbian]] + --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo Harmattan]] [[Category:Symbian]]




Hamishwillee: Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)
2012-02-15T05:51:27Z
Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

			
			
			
			
		
		← Older revision
		Revision as of 05:51, 15 February 2012
		
Line 86:
Line 86:
  * http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application   * http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application
    
− --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST) + --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo]] [[Category:Symbian]]



Hamishwillee: Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData
2011-06-24T09:30:19Z
Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData

			
			
			
			
		
		← Older revision
		Revision as of 09:30, 24 June 2011
		
Line 1:
Line 1:
  [[Category:Qt]][[Category:Qt Quick]]   [[Category:Qt]][[Category:Qt Quick]]
− {{CodeSnippet + {{ArticleMetaData
  |id=   |id=
  |platform=Symbian   |platform=Symbian
Line 8:
Line 8:
  |creationdate= 17th May, 2011   |creationdate= 17th May, 2011
  |keywords= Animation   |keywords= Animation
  + 
  + |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
  + |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
  + |sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
  + |devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) -->
  + |signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
  + |capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) -->
  + |author=[[User:Somnathbanik]]
  }}   }}
             




Hamishwillee: Hamishwillee - Bot fixing redirect link.(Moving links from forum.nokia.com TO developer.nokia.com)
2011-06-21T11:55:23Z
Hamishwillee - Bot fixing redirect link.(Moving links from forum.nokia.com TO developer.nokia.com)

			
			
			
			
		
		← Older revision
		Revision as of 11:55, 21 June 2011
		
Line 71:
Line 71:
  ==Related Articles on Animation==   ==Related Articles on Animation==
    
− * http://wiki.forum.nokia.com/index.php/Qt_Kinetic_Animations_with_Buttons   + * http://www.developer.nokia.com/Community/Wiki/index.php/Qt_Kinetic_Animations_with_Buttons  
− * http://wiki.forum.nokia.com/index.php/Simple_Animation_using_QML     + * http://www.developer.nokia.com/Community/Wiki/index.php/Simple_Animation_using_QML    
− * http://wiki.forum.nokia.com/index.php/Twisted_Carousel_Animation_with_the_Qt_graphics_view_framework   + * http://www.developer.nokia.com/Community/Wiki/index.php/Twisted_Carousel_Animation_with_the_Qt_graphics_view_framework  
− * http://wiki.forum.nokia.com/index.php/CS001629_-_Implementing_parent_change_animation_with_QML     + * http://www.developer.nokia.com/Community/Wiki/index.php/CS001629_-_Implementing_parent_change_animation_with_QML    
− * http://wiki.forum.nokia.com/index.php/CS001628_-_Implementing_of_fading_animation_with_QML   + * http://www.developer.nokia.com/Community/Wiki/index.php/CS001628_-_Implementing_of_fading_animation_with_QML  
− * http://wiki.forum.nokia.com/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application + * http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application
    
  --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)   --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)




Somnathbanik at 10:11, 17 May 2011
2011-05-17T10:11:21Z


			
			
			
			
		
		← Older revision
		Revision as of 10:11, 17 May 2011
		
Line 66:
Line 66:
           
  ==Source Code==   ==Source Code==
− The full source code presented in this article is available here [[File:AnimationQML.zip]] + The full source code presented in this article is available here [[File:AnimationQt.zip]]
           
           




Somnathbanik at 10:09, 17 May 2011
2011-05-17T10:09:30Z


			
			
			
			
		
		← Older revision
		Revision as of 10:09, 17 May 2011
		
Line 17:
Line 17:
  We will create an example that displays a rectangle with colors. When we click on  the screen the rectangle moves with easing effects and animated to where the mouse is clicked.   We will create an example that displays a rectangle with colors. When we click on  the screen the rectangle moves with easing effects and animated to where the mouse is clicked.
               
− [[Image:AnimationQt.png]]   + [[Image:AnimationQt.png|120x320px]]  
  {{Note| This is a very basic animation in QML for beginners}}   {{Note| This is a very basic animation in QML for beginners}}
             



Somnathbanik at 10:05, 17 May 2011
2011-05-17T10:05:38Z


			
			
			
			
		
		← Older revision
		Revision as of 10:05, 17 May 2011
		
Line 18:
Line 18:
               
  [[Image:AnimationQt.png]]     [[Image:AnimationQt.png]]  
  + {{Note| This is a very basic animation in QML for beginners}}
             
  Here we will link the default animation to when a property changes, so we will make a rectangle that follows the mouse click. This can be achieved by adding [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] elements and adding a {{Icode|MouseArea}} like below.   Here we will link the default animation to when a property changes, so we will make a rectangle that follows the mouse click. This can be achieved by adding [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] elements and adding a {{Icode|MouseArea}} like below.
Line 68:
Line 69:
           
           
−  ==Related Articles on Animation== + ==Related Articles on Animation==
  +  
  * http://wiki.forum.nokia.com/index.php/Qt_Kinetic_Animations_with_Buttons     * http://wiki.forum.nokia.com/index.php/Qt_Kinetic_Animations_with_Buttons  
  * http://wiki.forum.nokia.com/index.php/Simple_Animation_using_QML       * http://wiki.forum.nokia.com/index.php/Simple_Animation_using_QML    



Somnathbanik at 10:04, 17 May 2011
2011-05-17T10:04:04Z


			
			
			
			
		
		← Older revision
		Revision as of 10:04, 17 May 2011
		
Line 1:
Line 1:
  [[Category:Qt]][[Category:Qt Quick]]   [[Category:Qt]][[Category:Qt Quick]]
−    
  {{CodeSnippet   {{CodeSnippet
  |id=   |id=
Line 20:
Line 19:
  [[Image:AnimationQt.png]]     [[Image:AnimationQt.png]]  
             
− Here we will link the default animation to when a property changes, so we will make a rectangle that follows the mouse click. This can be achieved by adding [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] elements and adding a MouseArea like below. + Here we will link the default animation to when a property changes, so we will make a rectangle that follows the mouse click. This can be achieved by adding [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] elements and adding a {{Icode|MouseArea}} like below.
  <code cpp>   <code cpp>
  import QtQuick 1.0   import QtQuick 1.0
Line 38:
Line 37:
  }   }
  </code>   </code>
− When the value of x and y changes in the [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] declaration, it means it should animate over 500 milliseconds. Till now we have done animation without easing effects.   + When the value of '''x''' and '''y''' changes in the [http://doc.qt.nokia.com/4.7/qml-behavior.html Behavior] declaration, it means it should animate over 500 milliseconds. Till now we have done animation without easing effects.  
  The [http://doc.qt.nokia.com/4.7/animation-easing.html Easing] property of animations has a number of attributes that control   The [http://doc.qt.nokia.com/4.7/animation-easing.html Easing] property of animations has a number of attributes that control
  how the value should be varied.   how the value should be varied.
Line 69:
Line 68:
           
           
−   Related Articles on Animation +   ==Related Articles on Animation==
  * http://wiki.forum.nokia.com/index.php/Qt_Kinetic_Animations_with_Buttons     * http://wiki.forum.nokia.com/index.php/Qt_Kinetic_Animations_with_Buttons  
  * http://wiki.forum.nokia.com/index.php/Simple_Animation_using_QML       * http://wiki.forum.nokia.com/index.php/Simple_Animation_using_QML    
Line 76:
Line 75:
  * http://wiki.forum.nokia.com/index.php/CS001628_-_Implementing_of_fading_animation_with_QML     * http://wiki.forum.nokia.com/index.php/CS001628_-_Implementing_of_fading_animation_with_QML  
  * http://wiki.forum.nokia.com/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application   * http://wiki.forum.nokia.com/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application
  + 
  + --[[User:Somnathbanik|Somnathbanik]] 13:04, 17 May 2011 (EEST)

← Older revision		Revision as of 10:51, 13 June 2012
Line 86:		Line 86:
	* http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application		* http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application

−	--[[User:Somnathbanik\|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo]] [[Category:Symbian]]	+	--[[User:Somnathbanik\|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo Harmattan]] [[Category:Symbian]]

← Older revision		Revision as of 05:51, 15 February 2012
Line 86:		Line 86:
	* http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application		* http://www.developer.nokia.com/Community/Wiki/index.php/CS001556_-_Enabling_Qt_Animation_Framework_in_an_application

−	--[[User:Somnathbanik\|Somnathbanik]] 13:04, 17 May 2011 (EEST)	+	--[[User:Somnathbanik\|Somnathbanik]] 13:04, 17 May 2011 (EEST)[[Category:MeeGo]] [[Category:Symbian]]

← Older revision		Revision as of 10:11, 17 May 2011
Line 66:		Line 66:

	==Source Code==		==Source Code==
−	The full source code presented in this article is available here [[File:~~AnimationQML~~.zip]]	+	The full source code presented in this article is available here [[File:AnimationQt.zip]]

Basic Animation in QML - Revision history

Hamishwillee: Text replace - "" to ""

Hamishwillee: Hamishwillee - Bot update - Add ArticleMetaData

Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

Hamishwillee: Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

Hamishwillee: Hamishwillee - Bot change of template (Template:CodeSnippet) - now using Template:ArticleMetaData

Hamishwillee: Hamishwillee - Bot fixing redirect link.(Moving links from forum.nokia.com TO developer.nokia.com)

Somnathbanik at 10:11, 17 May 2011

Somnathbanik at 10:09, 17 May 2011

Somnathbanik at 10:05, 17 May 2011

Somnathbanik at 10:04, 17 May 2011

Hamishwillee: Text replace - "`" to ""`