NumberAnimation数字类动画

最新推荐文章于 2024-01-03 10:55:50 发布

转载最新推荐文章于 2024-01-03 10:55:50 发布 · 569 阅读

QML学习之路专栏收录该内容

35 篇文章

订阅专栏

本文通过一个实例演示了如何在QML中使用NumberAnimation实现元素的移动、旋转和缩放动画。实验证明，多个NumberAnimation可以并行作用于同一对象的不同属性，无需使用ParallelAnimation组合。此外，还介绍了如何监听动画结束事件。

转自：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