QML -- 动画（1）

Animation

这是所有动画的基类

属性

• running: bool, 默认为false, 为true时动画会启动，或者调用start()也会将此属性置为true, 调用stop() 变成 false
• loops = 1: 默认， Animation.Infinite执行无限次
• pause：bool 暂停动画，调用pause方法也会将其置为true
• awaysRunToEnd:false, 如果为true,runnint = true或调用stop()方法后，动画要执行完整个过程后才停止

方法

• start()
• stop()
• restart()
• pause()
• complete(), 如果running = true, 则直接跳动画完成状态，如果为false则什么事也不做

信号

• started()
• stoped()

怎样启动/停止一个动画

启动

• 调用start()方法
• running = true, 或绑定一个表达式，使用这个表达式为true

停止

• 调用stop()方法
• running = false, 或让其绑定的表达式为false

PropertyAnimation

三种定义和使用方式

单独使用

Rectangle {
  id: rect
  width 50
  height: 200
  anchors.centerIn: parent
  color: "red"
  PropertyAnimation {
    id: widthAnimation
    target: rect
    property: "width"
    form: 10
    to: 150
    duration: 1000
  }
}

多个对象，多个属性

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
        id: r1
        x: 10
        y: 20
        width: 10
        height: 150
        color: "blue"
    }
    Rectangle {
        id: r2
        x: 10
        y: 20 + r1.height + 10
        width: 10
        height: 150
        color: "red"
    }

    PropertyAnimation {
        id: animation
        targets: [r1, r2]
        properties: "width, x"
        from: 10
        to: 150
        duration: 1000
    }
    MouseArea {
        anchors.fill: parent
        onClicked: animation.running = true
    }

}

在信号处理器中使用

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
        id: r1
        x: 10
        y: 20
        width: 10
        height: 150
        color: "blue"
    }
    Rectangle {
        id: r2
        x: 10
        y: 20 + r1.height + 10
        width: 10
        height: 150
        color: "red"
    }


    MouseArea {
        anchors.fill: parent
        onClicked: PropertyAnimation {
            id: animation
            targets: [r1, r2]
            properties: "width, x"
            from: 10
            to: 150
            duration: 1000
        }
    }

}

使用Animation on <property>

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
        id: r1
        x: 10
        y: 20
        width: 10
        height: 150
        color: "blue"
    }
    Rectangle {
        id: r2
        x: 10
        y: 20 + r1.height + 10
        width: 10
        height: 150
        color: "red"
        PropertyAnimation on width {
            from: 10
            to: 150
            duration: 1000
            running: mouse.pressed
        }
    }


    MouseArea {
        id: mouse
        anchors.fill: parent
    }

}

PropertyAnimation 只能是用于直父元素的某一个属性

NumbrrAnimation

to和from只能是real类型

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
        x: 10
        y: 20 + r1.height + 10
        width: 10
        height: 150
        opacity: 1.0
        color: "red"
        radius: 0
        NumberAnimation on width {
            from: 10
            to: 150
            duration: 1000
            running: mouse.pressed
        }
        NumberAnimation on opacity
        {
            from: 1.0
            to: 0.2
            duration: 1000
            running: mouse.pressed
        }
        NumberAnimation on x {
            from: 10
            to: 640-10- 150
            duration: 1000
            running: mouse.pressed
        }

        NumberAnimation on radius {
            to: 150 / 2
            duration: 1000
            running: mouse.pressed
        }
    }

    MouseArea {
        id: mouse
        anchors.fill: parent
    }

}

RotationAnimation

• 专门处理rotation，from和to都是real
• 新增了direction属性

direction属性的取值

• RotationAnimation.Numerical，默认值，做线性插值旋转， 比如： from = 10 to = 80 那么就旋转 70度

• RotationAnimation.Clockwise/RotationAnimation.CounterClockwise，顺/逆时针旋转
• RotationAnimation.Shortest,在两个角度之间选最短路径，比如 from 10 to 350, 将逆时针旋转20度

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
        id: r
        x: 100
        y: 200
        width: 100
        height: 150
        opacity: 1.0
        color: "red"
        radius: 0
        Text {
            anchors.centerIn: parent
            text: "Text"
        }
        transformOrigin: Item.Top
         // 不用指定属性
        RotationAnimation {
            target: r
            from: 0
            to: 180
            running: mouse.pressed
            duration: 1000
        }
    }

    MouseArea {
        id: mouse
        anchors.fill: parent
    }

}

第23行指定旋转中心：​​https://doc.qt.io/qt-6/qml-qtquick-item.html#transformOrigin-prop​​ 以图的方式描述了位置和值的关系。

PathAnimation

​​https://doc.qt.io/qt-6/qml-qtquick-pathanimation.html​​

让目标对象沿着一个既定的路径运动

SmoothedAnimation

​​https://doc.qt.io/qt-6/qml-qtquick-smoothedanimation.html​​

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
        id: r
        x: 100
        y: 200
        width: 100
        height: 150
        opacity: 1.0
        color: "red"
        rotation: 0
        radius: 0
        Text {
            anchors.centerIn: parent
            text: "Text"
        }
        transformOrigin: Item.Top

        SmoothedAnimation on rotation{
            from: 0
            to: 180
            duration: 1000
            velocity: -1
            running: mouse.pressed
        }
    }

    MouseArea {
        id: mouse
        anchors.fill: parent
    }

}

SpringAnimation

模仿弹簧的振荡行为， spring用于控制动画的加速度： 0 ~ 5.0，damping表示衰减系数：0 ~ 1.0

epsilon 设置一个接近于0的阈值来代表0，如果是基于像素的动画： 0.25比较合适，如果是其于scale的动画 0.005比较合适。 默认值是0.01

velocity设置动画的最大速率， 默认值是0，没有限制

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
       Rectangle {
        id: rect
        width: 50; height: 50
        color: "red"

        Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
        Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: (mouse)=> {
            rect.x = mouse.x - rect.width/2
            rect.y = mouse.y - rect.height/2
        }
    }
}

未完，待续...