QML动画（其他的动画）_qt qml animation结束信号

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（平滑动画）

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

属性：

reversingMode：enumeration

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

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（属性操作）

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

属性：

 动画中修改透明度和缩放

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 （脚本操作）

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

属性： 

 直接使用脚本操作：

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

 属性：

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

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（锚点动画）

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

属性：

使用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（父动画）

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

 属性：

例子：

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（路径动画）

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

属性：

orientation：enumerate

例子：

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博客