[Qt-qml] ScalingAnimation in QML

Bartosh Wroblevksy bartosh at live.com
Mon Aug 16 06:21:56 CEST 2010


Hi Bea,

Thanks for the feedback. I really appreciate it. I guess something eludes me a little is when you write:

> Alternatively, if the transformOrigin should only be changed for
the purpose of the animation (and not the state) you can omit the
setting of the transformOrigin in the 
> PropertyChanges, and change the
PropertyAction to:
>
>PropertyAction { target: rect; property: "transformOrigin"; value: Item.BottomRight }

So if I omit the transformOrigin in the PropertyChanges and write this

states: State {
name: "rotated"
PropertyChanges { target: rect;  rotation: 180 }
}
 
transitions: Transition {
SequentialAnimation {
 	PropertyAction { target: rect; property: "transformOrigin"; value: Item.BottomRight }
RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
 }
}

I am not sure I follow. If the state "rotated" is invoked, will the transform Origin change for this rotation? How does this work? In this context, does every rotation, regardless of state, have it's the transformOrigin  at BottomRight? Also, what if I want my transformOrigin to be coordinates and anchors, what can I do?

Bartosh




> From: bea.lam at nokia.com
> To: bartosh at live.com
> CC: qt-qml at trolltech.com
> Date: Mon, 16 Aug 2010 05:34:53 +0200
> Subject: Re: [Qt-qml] ScalingAnimation in QML
> 
> Hi Bartosh,
> 
> On 14/08/2010, at 8:24 AM, ext Bartosh Wroblevksy wrote:
> 
> > Hi
> > 
> > I would like to do a rotation animation through transition but would like to change the center of the rotation. Can I change the property "transformOrigin" on the fly?
> >    something like this
> > 
> >      Rectangle {
> >          id: rect
> >          width: 150; height: 100; anchors.centerIn: parent
> >          color: "red"
> >          smooth: true
> > 
> >          states: State {
> >              name: "rotated"; 
> >              PropertyChanges {transformOrigin: BottomRight; //how to change the transform origin on the fly
> >                               target: rect; rotation: 180 }
> >          }
> > 
> >          transitions: Transition {
> >              RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
> >          }
> >      }
> 
> Yes, you'll need to set the transformOrigin to "Item.BottomRight" in the PropertyChanges, and then in the Transition, use a PropertyAction to force the transformOrigin to be set before the RotationAnimation begins, like this:
> 
>          states: State {
>              name: "rotated"
>              PropertyChanges { target: rect; transformOrigin: Item.BottomRight; rotation: 180 }
>          }
> 
>          transitions: Transition {
>              SequentialAnimation {
>                  PropertyAction { property: "transformOrigin" }
>                  RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
>              }
>          }
> 
> The PropertyAction essentially fast-forwards the setting of the transformOrigin so that it is set at the beginning rather than the end of the transition. 
> 
> Alternatively, if the transformOrigin should only be changed for the purpose of the animation (and not the state) you can omit the setting of the transformOrigin in the PropertyChanges, and change the PropertyAction to:
> 
> 	PropertyAction { target: rect; property: "transformOrigin"; value: Item.BottomRight }
> 
> 
> regards,
> 
> Bea
 		 	   		  
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20100816/22b2ae72/attachment.html 


More information about the Qt-qml mailing list