1.RotationAnimation
RotationAnimation也是继承于PropertyAnimation组件,但是它有点特殊,它只需要指定taget目标对象,并且不需要指定property,因为rotation就是要绑定的属性.并且它还多了个direction属性:
direction : enumeration,设置旋转的方向,取值有:
RotationAnimation.Numerical (默认值) - 数值旋转,通过to-from得出要旋转的度数,然后进行旋转,比如from为10,to为100,那么旋转就是90°
RotationAnimation.Clockwise - 在两个度数之间进行顺时针旋转,比如from为10,to为100,那么顺旋转就是90°
RotationAnimation.Counterclockwise - 在两个度数之间进行逆时针旋转,比如from为10,to为100,那么逆旋转就是90°
RotationAnimation.Shortest - 沿最短路径的方向旋转。比如from为10,to为350,那么将逆时针旋转20°
示例如下所示:
property var rotationModel: [ ["#00FF00", RotationAnimation.Numerical], ["#FF0000", RotationAnimation.Clockwise], ["#0000FF", RotationAnimation.Counterclockwise], ["#00FFFF", RotationAnimation.Shortest], ] property var animations: new Array(0) MouseArea { id: area anchors.fill: parent onPressed: { for (var i in animations) { console.log(animations[i].direction) animations[i].start(); } } } Row { spacing: 10 Repeater { model: rotationModel.length Rectangle { id: rect width: 100 height: 100 radius: width / 2 color: rotationModel[index][0] Text { anchors.centerIn: parent text: "model"+ index.toString() color: "white" font.pixelSize: 18 font.bold: true } RotationAnimation { running: true duration: 500 target: rect direction: rotationModel[index][1] from : 10 to : 350 Component.onCompleted: animations[index] = this } } } }