【QML COOK】- 011-动画插值设置

QML中内置了一些动画插值类型。不同的插值类型可以通过Animation的easing属性设置。具体可见：PropertyAnimation QML Type | Qt Quick 6.6.1

1. 创建工程在Main.qml，中编写如下代码

import QtQuick

Window {
    width: 1000
    height: 100
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id : a
        x : 0
        y : 0
        width : 20
        height : 20
        color : "yellow"
        SequentialAnimation on x {
            running: true
            loops: Animation.Infinite // The animation is set to loop indefinitely
            NumberAnimation { from: 0; to: 980; duration: 10000; easing.type: Easing.Linear }
            NumberAnimation { from: 980; to: 0; duration: 10000; easing.type: Easing.Linear }
            PauseAnimation { duration: 1000 } // This puts a bit of time between the loop
        }
    }

    Rectangle {
        id : b
        x : 0
        y : 0
        width : 20
        height : 20
        color : "blue"
        anchors.top: a.bottom
        SequentialAnimation on x {
            running: true
            loops: Animation.Infinite // The animation is set to loop indefinitely
            NumberAnimation { from: 0; to: 980; duration: 10000; easing.type: Easing.InOutQuad }
            NumberAnimation { from: 980; to: 0; duration: 10000; easing.type: Easing.InOutQuad }
            PauseAnimation { duration: 1000 } // This puts a bit of time between the loop
        }
    }

    Rectangle {
        id : c
        x : 0
        y : 0
        width : 20
        height : 20
        color : "black"
        anchors.top: b.bottom
        SequentialAnimation on x {
            running: true
            loops: Animation.Infinite // The animation is set to loop indefinitely
            NumberAnimation { from: 0; to: 980; duration: 10000; easing.type: Easing.OutCubic }
            NumberAnimation { from: 980; to: 0; duration: 10000; easing.type: Easing.OutCubic }
            PauseAnimation { duration: 1000 } // This puts a bit of time between the loop
        }
    }

    Rectangle {
        id : d
        x : 0
        y : 0
        width : 20
        height : 20
        color : "red"
        anchors.top: c.bottom
        SequentialAnimation on x {
            running: true
            loops: Animation.Infinite // The animation is set to loop indefinitely
            NumberAnimation { from: 0; to: 980; duration: 10000; easing.type: Easing.InElastic }
            NumberAnimation { from: 980; to: 0; duration: 10000; easing.type: Easing.InElastic }
            PauseAnimation { duration: 1000 } // This puts a bit of time between the loop
        }
    }

    Rectangle {
        id : e
        x : 0
        y : 0
        width : 20
        height : 20
        color : "green"
        anchors.top: d.bottom
        SequentialAnimation on x {
            running: true
            loops: Animation.Infinite // The animation is set to loop indefinitely
            NumberAnimation { from: 0; to: 980; duration: 10000; easing.type: Easing.OutInBounce }
            NumberAnimation { from: 980; to: 0; duration: 10000; easing.type: Easing.OutInBounce }
            PauseAnimation { duration: 1000 } // This puts a bit of time between the loop
        }
    }
}

代码中创建了5个Rectangle，给x属性设置了不同的easing.type，运行后可以观察不同插值的效果。

2. 运行程序