26.Qt Quick QML-RotationAnimation、PathAnimation、SmoothedAnimation、Behavior、PauseAnimation、SequentialAnimation和ParallelAnimation

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
                }
            }
        }
    }