QML之动画的使用（含源码+注释）

一、动画效果示例图

下图演示四组动画效果分别包含数值动画（单个方块、多个方块），顺序动画，并行动画等效果

二、个人理解

1. NumberAnimation：改变控件属性值的动画效果，可针对坐标位置（x，y）、大小（width、height）、透明度等参数改变动画。
2. SequentialAnimation：顺序动画，作用域包含的多个动画从上到下依次运行动画效果。
3. ParallelAnimation：并行动画，作用域包含的多个动画同时运行。
4. 其他动画：QML还包含PropertyAnimation、RotationAnimation、ColorAnimation等动画效果，可根据实际需求使用具体效果。

三、源码

import QtQuick 2.0
import QtQuick.Controls 2.12

Item {

        Button {
            id: btnNumForSingle
            text: "属性动画(单个)"
            onClicked: {
                rect1.resetPos() // 重置方块位置
                numAnimForSingle.start() // 动画启动
            }
        }

        Button {
            id: btnNumForMuilt
            text: "属性动画(多个)"
            anchors.left: btnNumForSingle.right
            onClicked: {
                numAnimForMulti.resetPos() // 重置方块位置
                numAnimForMulti.start() // 动画启动
            }
        }

        Button {
            id: btnNumForSequen
            text: "顺序动画"
            anchors.left: btnNumForMuilt.right
            onClicked: {
                rect1.resetPos() // 重置方块位置
                sequentialAnim.start() // 动画启动
            }
        }

        Button {
            id: btnNumForParallel
            text: "并行动画"
            anchors.left: btnNumForSequen.right
            onClicked: {
                rect1.resetPos() // 重置方块位置
                parallelAnim.start() // 动画启动
            }
        }

        Rectangle {
            id: rect1
            x: 20
            y: 300
            width: 50
            height: 50
            visible: true
            color: "skyblue"
            function resetPos() {
                x = 20
                y = 300
            }
        }



        Rectangle {
            id: rect2
            x: 20
            y: 370
            width: 50
            height: 50
            visible: true
            color: "lightgreen"
            function resetPos() {
                x = 20
                y = 370
            }
        }

    // 单元素动画
    NumberAnimation {
        id: numAnimForSingle
        target: rect1
        property: "x"
        duration: 2000
        to: 500
        easing.type: Easing.InOutQuad   // 动画效果
    }

    // 多元素对象动画
    NumberAnimation {
        id: numAnimForMulti
        targets: [rect1, rect2]
        properties: "x,y"
        duration: 2000
        to:350
        function resetPos() {
            rect1.resetPos()
            rect2.resetPos()
        }
    }

    //! 多动画组合
    // 顺序动画
    SequentialAnimation {
        id:sequentialAnim
        NumberAnimation {
            target: rect1
            property: "x"
            duration: 2000
            to: 500
        }

        NumberAnimation {
            target: rect1
            property: "y"
            duration: 2000
            to: 200
        }

    }

    // 并行动画
    ParallelAnimation {
        id:parallelAnim
        NumberAnimation {
            target: rect1
            property: "x"
            duration: 2000
            to: 500
        }

        NumberAnimation {
            target: rect1
            property: "y"
            duration: 2000
            to: 200
        }
    }
}

总结

记录一下简易的QML动画效果使用，包含的动画效果考研根据需求使用，可能会有意想不到的收获。

友情提示——哪里看不懂可私哦，让我们一起互相进步吧
（创作不易，请留下一个免费的赞叭 谢谢 o/)

注：文章为作者编程过程中所遇到的问题和总结，内容仅供参考，若有错误欢迎指出。
注：如有侵权，请联系作者删除