PauseAnimation （暂停动画）

为动画提供暂停

Rectangle{
        id:rect1
        width: 100;height: 100;x:100;y:100
        color: "lightBlue"
        SequentialAnimation{
            running: true

            ColorAnimation {
                target: rect1；property: "color"；from: "white"；to: "black"；duration: 2000
            }

            PauseAnimation {
                duration: 2000  //暂停2s
            }
            ColorAnimation {
                target: rect1；property: "color"；from: "black"；to: "white"；duration: 2000
            }
        }
    }

SmoothedAnimation（平滑动画）

平滑动画使用缓入/缓出四缓曲线将属性值动画化为设定的目标值。当目标值更改时，用于在新旧目标值之间进行动画处理的缓动曲线将平滑地拼接在一起，以创建到保持当前速度的新目标值的平滑运动。

属性：

duration	持续时间
maximumEasingTime	最大缓动时间
reversingMode	缓动模型
velocity	移动速度(默认速度为 200 个单位/秒)

reversingMode：enumeration

SmoothedAnimation.Eased (default)	动画将平滑减速，然后反转方向
SmoothedAnimation.Immediate	动画将立即开始向相反方向加速，从速度 0 开始
SmoothedAnimation.Sync	属性立即设置为目标值

按下上下左右按键，移动小方块。

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id:window1
    visible: true
    width: 700
    height: 700
    title: qsTr("Hello World")
    Rectangle{
        anchors.fill:parent
        Rectangle {
            id:rect1
            width: 60; height: 60
            x: 50; y: 50
            color: "green"

            Behavior on x {
                SmoothedAnimation { velocity: 500 } }
            Behavior on y { SmoothedAnimation { velocity: 500 } }
        }
        focus: true
        Keys.onRightPressed: rect1.x = rect1.x + 100
        Keys.onLeftPressed: rect1.x = rect1.x - 100
        Keys.onUpPressed: rect1.y = rect1.y - 100
        Keys.onDownPressed: rect1.y = rect1.y + 100
    }
}

PropertyAction（属性操作）

属性操作用于指定动画期间的即时属性更改。属性更改不会以动画形式显示。它可用于在动画期间设置非动画属性值。

属性：

exclude	排除属性
property properties	属性
target targets	对象
value	数值

动画中修改透明度和缩放

Rectangle{
        id:rect1
        width:100;height: 100;x:100;y:100;color: "lightBlue"
        SequentialAnimation{
            running: true

            ColorAnimation {
                target: rect1;property: "color";from: "white";to: "black";duration: 2000
            }
            PropertyAction{
                target: rect1;property: "opacity";value: 0.2//透明度
            }
            PropertyAction{
                target: rect1;property: "scale";value: 0.5//缩放
            }

            ColorAnimation {
                target: rect1;property: "color";from: "black";to: "white";duration: 2000
            }
        }
    }

使用State来定义过渡时出现的问题：

采用 State 来定义过渡结束时的值。动画将以默认值旋转，然后跳转到指定位置。

Item {
    width: 400; height: 400

    Rectangle {
        id: rect
        width: 200; height: 100
        color: "red"

        states: State {
            name: "rotated"
            //围绕右下角旋转
            PropertyChanges { target: rect; rotation: 180; transformOrigin: Item.BottomRight }
        }

        transitions: Transition {
            //设置过渡动画
            RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: rect.state = "rotated"
        }
    }
}

解决方法：

在旋转动画开始前插入一个属性操作，这会立即将属性设置为过渡的结束状态中定义的值，以便旋转动画从正确的变换原点开始。

transitions: Transition {
    SequentialAnimation {
        PropertyAction { target: rect; property: "transformOrigin" }
        RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
    }
}

ScriptAction （脚本操作）

脚本操作可用于在动画中的特定点运行脚本。

属性：

script	脚本
scriptName	脚本名称

直接使用脚本操作：

function fun1(){
        console.log("脚本已执行")
    }

    Rectangle{
        id:rect1
        width:100;height: 100;x:100;y:100;color: "lightBlue"
        SequentialAnimation{
            running: true
            NumberAnimation{}
            ScriptAction{script:fun1()} //执行脚本
            NumberAnimation{}
        }
    }

使用state使用动画：

function fun1(){
        console.log("脚本已执行")
    }
    Rectangle{
        id:rect1
        focus:true
        width:100;height: 100;x:100;y:100;color: "lightBlue"
        states: State {
            name: "some"
            StateChangeScript{
                name:"myScript"
                script: fun1()//执行脚本
            }
        }
        transitions: Transition {
            to:"some"
            SequentialAnimation{
                NumberAnimation{}
                ScriptAction{scriptName: "myScript"}
                NumberAnimation{}
            }

        }
        Keys.onSpacePressed: {
            rect1.state="some"
        }
    }

SpringAnimation（弹簧动画）

SpringAnimation模仿弹簧的振荡行为，使用适当的弹簧常数来控制加速度，使用阻尼来控制效果消失的速度。您还可以限制动画的最大速度。

属性：

damping	保存弹簧阻尼值，描述类似弹簧的运动停止的速度。默认值为 0。有用的值范围为 0 - 1.0。值越低，休息得越快
epsilon	值的变化率和变化量，该值足够接近 0 以被视为等于零对于像素位置，0.25 就足够了。对于比例，0.005 就足够了。默认值为 0.01。
mass	质量，默认情况下，该值为 1.0
modulus	保存模值。默认值为 0，设置模数会强制目标值在模数处“环绕”。例如，将模数设置为 360 将导致值 370 环绕为 10。
spring	描述目标被拉向源的强度。默认值为 0（即禁用类似弹簧的运动）。有用值范围为 0 - 5.0。如果设置此属性并且速度值大于 0，则速度会限制最大速度。
velocity	此属性保持跟踪源时允许的最大速度。默认值为 0（无最大速度）

鼠标点到哪里，图形移动到哪里，有点震荡的效果。

Item{
        anchors.fill:parent
        Rectangle{
            id:rect1
            width: 100;height: 100;color: "lightBlue"
            Behavior on x{SpringAnimation{spring: 2;damping: 0.2}}
            Behavior on y{SpringAnimation{spring: 2;damping: 0.2}}
        }
        MouseArea{
            anchors.fill:parent
            onPressed: {
                rect1.x=mouse.x
                rect1.y=mouse.y
            }
        }
    }

AnchorAnimation（锚点动画）

锚点动画用于对锚点更改进行动画处理，锚点动画只能在过渡中以及与锚点更改结合使用。它不能用于行为和其他类型的动画。

属性：

duration	持续时间
easing	缓和
targets	项目列表

使用AnchorChageds（锚点更改）

Item{
        id:item1
        width: 500;height: 500
        focus:true
        Rectangle{
            id:rect1
            width: 100;height: 100;color: "lightBlue"
        }
        states:State{
            name:"some"
            AnchorChanges{    //锚的修改
                target: rect1
                anchors.top:item1.top
                anchors.bottom:item1.bottom
            }
            PropertyChanges {
                target: rect1
                anchors.topMargin: 10
                anchors.bottom: 10
            }
        }
        Keys.onPressed: {
            item1.state="some"
        }
    }

使用锚点动画：

Item{
        id:item1
        width: 500;height: 500
        focus:true
        Rectangle{
            id:rect1
            width: 100;height: 100;color: "lightBlue"
        }
        states:State{
            name:"some"
            AnchorChanges{    //锚的修改
                target: rect1
                anchors.top:item1.top
                anchors.bottom:item1.bottom
            }
            PropertyChanges {
                target: rect1
                anchors.topMargin: 10
                anchors.bottom: 10
            }
        }
        transitions: Transition {
            AnchorAnimation{duration: 1000}//设置持续时间
        }
        Keys.onPressed: {
            item1.state="some"
        }
    }

ParentAnimation（父动画）

对父值中的更改进行动画处理，父动画可以包含任意数量的动画，父动画一般在过渡中与父更改一起使用，以这种方式使用时，它会对状态更改期间发生的任何父级更改进行动画处理。这可以通过使用目标属性设置特定目标项来覆盖。

属性：

parent	父项
target	对象
via	通过其重新设置父级的项目。这提供了一种在剪切旧父项和新父项时执行未剪裁动画的方法

例子：

Item{
        id:item1
        width: 500;height: 500

        Rectangle{
            id:rect1
            width: 100;height: 100;color: "lightBlue"
        }
        Rectangle{
            id:rect2
            focus:true
            width:50;height:50;x:200;y:200;color:"lightGreen"
            states:State{
                name:"some"
                ParentChange{target: rect2;parent: rect1;x:50;y:50}
            }
            transitions: Transition {
                ParentAnimation{ //使用父类动画
                    NumberAnimation{properties: "x,y";duration:2000}
                    ColorAnimation{property:"color";from:"lightGreen";to:"red";duration: 2000}
                }
            }
            Keys.onPressed: {
                rect2.state="some"
            }
        }
    }

PathAnimation（路径动画）

在过渡中使用时，可以指定不带起点或终点的路径

属性：

anchrorPoint	锚点
duration	持续时间，默认值为 250
easing	缓和
endRotation	结束旋转
orientation	方向
oritationEntryDuration	方向进入的持续时间
oritationExitDuration	方向退出的持续时间
path	保存要沿其进行动画处理的路径。
target	项目

orientation：enumerate

PathAnimation.Fixed (default)	不会控制项目的旋转
PathAnimation.RightFirst	项目的右侧将沿着路径引导
PathAnimation.LeftFirst	项目的左侧将沿着路径引导
PathAnimation.BottomFirst	项目的底部将沿着路径引导
PathAnimation.TopFirst	项目的顶部将沿着路径引导

例子：

Window {
    id:window1
    visible: true
    width: 700
    height: 700
    title: qsTr("Hello World")
    Rectangle{
        id:rect1

        width: 100;height: 100;color: "lightBlue"
    }
    PathAnimation{
        id:path
        target:rect1
        duration: 4000
        orientationEntryDuration: 2000
        orientationExitDuration: 2000
        easing.type: Easing.InQuart

        path:Path{
            startX: 0  //起点
            startY: 0
            pathElements: PathArc{ //绘制圆弧
                x:360   //终点
                y:0
                useLargeArc: true
                radiusX: 160
                radiusY: 160
                direction: PathArc.Counterclockwise
            }
        }

    }
    MouseArea {
           anchors.fill: parent
           onClicked: {
               path.start()//启动路径绘制
           }
       }

}

参考文章：

Animation and Transitions in Qt Quick | Qt Quick 5.15.12

QML之PathAnimation路径动画_炫彩灵感的博客-CSDN博客

QML动画（其他的动画）

PauseAnimation （暂停动画）

SmoothedAnimation（平滑动画）

PropertyAction（属性操作）

ScriptAction （脚本操作）

SpringAnimation（弹簧动画）

AnchorAnimation（锚点动画）

使用AnchorChageds（锚点更改）

使用锚点动画：

ParentAnimation（父动画）

PathAnimation（路径动画）

例子：

猜你喜欢