QML教程（四）动画

分手后的思念是犯贱 2024-03-30 13:48 200阅读 0赞

**目录**

一、状态和转换

二、属性更改进行动画

XAnimator 水平动画

YAnimator 垂直动画

ScaleAnimator 缩放动画

RotationAnimator 旋转动画

OpacityAnimator 透明度动画

UniformAnimator 颜色动画

三、其他动画

四、精灵动画AnimatedSprite

--------------------

Qt Quick提供了对属性进行动画处理的功能。对属性进行动画处理允许属性值在中间值之间移动，而不是立即更改为目标值。若要对项目的位置进行动画处理，可以对控制项目位置的属性（例如 x 和 y）进行动画处理，以便项目的位置在到达目标位置的途中更改每一帧。

Qt Quick提供了两种简单的方法，让UI组件随动画一起移动，而不是立即出现在新位置。

### 一、状态和转换 ###

Qt Quick允许在State对象中声明各种UI状态。这些状态由基状态的属性更改组成。过渡是可以与项目关联的对象，用于定义当项目因状态更改时，而随之更改其属性将如何进行动画处理。

例：

Item {
        id: container
        width: 320
        height: 120
    
        Rectangle {
            id: rect
            color: "red"
            width: 120
            height: 120
    
            TapHandler {
                onTapped: container.state === '' ? container.state = 'other' : container.state = ''
            }
        }
        states: [
            // This adds a second state to the container where the rectangle is farther to the right
    
            State { name: "other"
    
                PropertyChanges {
                    target: rect
                    x: 200
                }
            }
        ]
        transitions: [
            // This adds a transition that defaults to applying to all state changes
    
            Transition {
    
                // This applies a default NumberAnimation to any changes a state change makes to x or y properties
                NumberAnimation { properties: "x,y" }
            }
        ]
    }

### 二、属性更改进行动画 ###

行为可用于指定属性更改时要使用的动画。然后，这将应用于所有更改，无论其来源如何。下面的示例使用行为对在屏幕上移动的按钮进行动画处理。  
例：

Item {
        width: 320
        height: 120
    
        Rectangle {
            color: "green"
            width: 120
            height: 120
    
            // This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
            Behavior on x {
    
                NumberAnimation {
                    //This specifies how long the animation takes
                    duration: 600
                    //This selects an easing curve to interpolate with, the default is Easing.Linear
                    easing.type: Easing.OutBounce
                }
            }
    
            TapHandler {
                onTapped: parent.x == 0 ? parent.x = 200 : parent.x = 0
            }
        }
    }

1.  #### XAnimator 水平动画 ####
    
        Rectangle {
            id: xmovingBox
            width: 50
            height: 50
            color: "lightsteelblue"
            XAnimator {
                target: xmovingBox;
                from: 10;
                to: 0;
                duration: 1000
                running: true
            }
        }
    
    简写形式：**使用on语法进行绑定**
    
        Rectangle {
            width: 50
            height: 50
            color: "lightsteelblue"
            XAnimator on x {
                from: 10;
                to: 0;
                duration: 1000
            }
        }
2.  #### YAnimator 垂直动画 ####
    
        Rectangle {
            id: ymovingBox
            width: 50
            height: 50
            color: "lightsteelblue"
            YAnimator {
                target: ymovingBox;
                from: 10;
                to: 0;
                duration: 1000
                running: true
            }
        }
    
    简写形式：**使用on语法进行绑定**
    
        Rectangle {
            width: 50
            height: 50
            color: "lightsteelblue"
            YAnimator on y {
                from: 10;
                to: 0;
                duration: 1000
            }
        }
3.  #### ScaleAnimator 缩放动画 ####
    
        Rectangle {
            id: scalingBox
            width: 50
            height: 50
            color: "lightsteelblue"
            ScaleAnimator {
                target: scalingBox;
                from: 0.5;
                to: 1;
                duration: 1000
                running: true
            }
        }
    
    简写形式：**使用on语法进行绑定**
    
        Rectangle {
            width: 50
            height: 50
            color: "lightsteelblue"
            ScaleAnimator on scale {
                from: 0.5;
                to: 1;
                duration: 1000
            }
        }
4.  #### RotationAnimator 旋转动画 ####
    
        Rectangle {
            id: rotatingBox
            width: 50
            height: 50
            color: "lightsteelblue"
            RotationAnimator {
                target: rotatingBox;
                from: 0;
                to: 360;
                duration: 1000
                running: true
            }
        }
    
    简写形式：**使用on语法进行绑定**
    
        Rectangle {
            width: 50
            height: 50
            color: "lightsteelblue"
            RotationAnimator on rotation {
                from: 0;
                to: 360;
                duration: 1000
            }
        }
5.  #### OpacityAnimator 透明度动画 ####
    
        Rectangle {
            id: opacityBox
            width: 50
            height: 50
            color: "lightsteelblue"
            OpacityAnimator {
                target: opacityBox;
                from: 0;
                to: 1;
                duration: 1000
                running: true
            }
        }
    
    简写形式：**使用on语法进行绑定**
    
        Rectangle {
            width: 50
            height: 50
            color: "lightsteelblue"
            OpacityAnimator on opacity{
                from: 0;
                to: 1;
                duration: 1000
            }
        }
6.  #### UniformAnimator 颜色动画 ####
    
        ShaderEffect {
            id: shader
            width: 50
            height: 50
            property variant t;
            UniformAnimator {
                target: shader
                uniform: "t"
                from: 0
                to: 1
                duration: 1000
                running: true
            }
            fragmentShader: "qrc:shader.frag.qsb"
        }
    
    简写形式：**使用on语法进行绑定**
    
        ShaderEffect {
            width: 50
            height: 50
            property variant t;
            UniformAnimator on t {
                from: 0
                to: 1
                duration: 1000
            }
            fragmentShader: "qrc:shader.frag.qsb"
        }

### 三、其他动画 ###

并非所有动画都必须绑定到特定的属性或状态。还可以更一般地创建动画，并在动画中指定目标项和属性。以下是执行此操作的不同方法的一些示例：

Item {
        width: 320
        height: 120
    
        Rectangle {
            color: "blue"
            width: 120
            height: 120
    
            // By setting this SequentialAnimation on x, it and animations within it will automatically animate
            // the x property of this element
            SequentialAnimation on x {
                id: xAnim
                // Animations on properties start running by default
                running: false
                loops: Animation.Infinite // The animation is set to loop indefinitely
                NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad }
                NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad }
                PauseAnimation { duration: 250 } // This puts a bit of time between the loop
            }
    
            TapHandler {
                // The animation starts running when you click within the rectangle
                onTapped: xAnim.running = true
            }
        }
    }
    Item {
        width: 320
        height: 120
    
        Rectangle {
            id: rectangle
            color: "yellow"
            width: 120
            height: 120
    
            TapHandler {
                // The animation starts running when you click within the rectangle
                onTapped: anim.running = true;
            }
        }
    
        // This animation specifically targets the Rectangle's properties to animate
        SequentialAnimation {
            id: anim
            // Animations on their own are not running by default
            // The default number of loops is one, restart the animation to see it again
    
            NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 }
    
            NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 }
        }
    }

### 四、精灵动画AnimatedSprite ###

Qt Quick 精灵引擎是一个随机状态机，结合了切割包含多个动画帧的图像的能力。

AnimatedSprite {
        source: "loading.png"
        frameWidth: 64
        frameHeight: 64
        frameCount: 4
        frameDuration: 500
    }