NumberAnimation数字类动画

转自：https://blog.youkuaiyun.com/lvmengzou/article/details/86692112

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    id: win
    visible: true
    width: 400
    height: 400
    Rectangle{
        y: win.height/2
        id: source
        width: 100
        height: 100
        color: "red"
    }
    NumberAnimation {
        id: xChange
        target: source
        to: win.width - source.width
        property: "x"
        duration: 5000
        easing.type: Easing.InOutQuad
    }
    NumberAnimation {
        id: rotationChange
        target: source
        to: 360*5
        property: "rotation"
        duration: 5000
        easing.type: Easing.InOutQuad
    }
    NumberAnimation {
        id: radiusChange
        target: source
        to: 100
        property: "radius"
        duration: 5000
        easing.type: Easing.InOutQuad
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            xChange.start()
            rotationChange.start()
            radiusChange.start()
        }
    }

    Connections  {
        target: xChange
        onStopped : {
            console.log("xChange animation stopped---------------------")
        }
    }

    Connections  {
        target: rotationChange
        onStopped : {
            console.log("rotationChange animation stopped---------------------")
        }
    }

    Connections  {
        target: radiusChange
        onStopped : {
            console.log("radiusChange animation stopped---------------------")
        }
    }
}

运行效果：（截图软件的问题，程序运行是没有残影的）

加的onStopped是为了看清楚这几个动画是串行的，还是并行的。
结果发现是并行的，也就是说几个NumberAnimation如果作用在同一个对象，且目标属性不同时，是可以并行，而不需要ParallelAnimation的，这一点只有做了试验才知道。
并行动画组ParallelAnimation，串行动画组：SequentialAnimation

参考：
ParallelAnimation组合动画
https://blog.youkuaiyun.com/xuancailinggan/article/details/50902736