QML动画元素

在QML中，可以在对象的属性值上，应用动画对象随时间逐渐改变它们来创建动画。动画对象是用一组QML内建的动画元素创建的，可以根据属性的类型及是否需要一个或多个动画而有选择地使用这些动画元素来为多种类型的属性值产生动画。

所有的动画元素都继承自Animation元素，尽管它本身无法直接创建对象，但却为其他各种动画元素提供了通用的属性和方法。例如，用running属性和start()、stop()方法控制动画的开始和停止，用loops属性设定动画循环次数等。

PropertyAnimation元素

PropertyAnimation (属性动画元素）是用来为属性提供动画的最基本的动画元素，它直接继承自Animation元素，可以用来为real、int、color、rect、point、size和vector3d等属性设置动画。动画元素可以通过不同的方式来使用，取决于所需要的应用场景。一般的使用方式有如下几种：

• 作为属性值的来源。可以立即为一个指定的属性使用动画。
• 在信号处理器中创建。当接收到一个信号（如鼠标单击事件）时触发动画。
• 作为独立动画元素。像一个普通QML对象一样地被创建，不需要绑定到任何特定的对象和属性。
• 在属性值改变的行为中创建。当一个属性值改变时触发动画，这种动画又叫“行为动画”。

下面实例编程演示动画元素多种不同的使用方式，运行效果如下图所示。其中，“属性值源”矩形：始终在循环往复地移动；“信号处理”矩形：每单击一次会往返运动3次；“独立元素”矩形：每单击一次移动一次；任意时刻在窗口内的其他位置单击鼠标，“改变行为”矩形都会跟随鼠标移动。

实现步骤如下。

(1) 新建项目

新建QML应用程序，项目名称为“PropertyAnimation”。

(2) 自定义组件

定义4个矩形组件，代码分别如下：

/*“属性值源”矩形，源文件Rect1.qml */
import QtQuick 2.0
Rectangle {
  width: 80
  height: 80
  color: "orange"
  radius: 10
  Text {
    anchors.centerIn: parent
    font.pointSize: 12
    text: "属性值源"
  }
  PropertyAnimation on x { // (a)
    from: 50 //起点
    to: 500 //终点
    duration: 30000 //运动时间为30秒
    loops: Animation.Infinite //无限循环
    easing.type: Easing.OutBounce //(b)
  }
}

/*“信号处理”矩形，源文件Rect2.qml */
import QtQuick 2.0
Rectangle {
  id: rect2
  width: 80
  height: 80
  color: "lightgreen"
  radius: 10
  Text {
    anchors.centerIn: parent
    font.pointSize: 12
    text: "信号处理"
  }
  MouseArea {
    anchors.fill: parent
    onClicked: PropertyAnimation {//(c)
    target: rect2 //动画应用于标识rect2的矩形（目标对象)
    property: "y" //y轴方向的动画
    from: 30 //起点
    to: 300 //终点
    duration: 3000 //运动时间为3秒
    loops: 3 //运动3个周期
    easing.type: Easing.Linear //匀速线性运动
  }
  }
}

/* “独立元素”矩形，源文件Rect3.qml */
import QtQuick 2.0
Rectangle {
  id: rect3
  width: 80
  height: 80
  color: "aqua"
  radius: 10
  Text {
    anchors.centerIn: parent
    font.pointSize: 12
    text: "独立元素"
  }
  PropertyAnimation { //(d)
    id: animation //独立动画标识符
    target: rect3
    properties: "x,y" //同时在x、y轴两个方向上运动
    duration: 1000 //运动时间为1秒
    easing.type: Easing.InOutBack //运动到半程增加过冲，然后减少
  }
  MouseArea {
    anchors.fill: parent
    onClicked: {
      animation.from = 20 //起点
      animation.to = 200 //终点
      animation.running = true //开启动画
 		}
  }
}

/* “改变行为”矩形，源文件Rect4.qml */
import QtQuick 2.0
Rectangle {
  width: 80
  height: 80
  color: "lightblue"
  radius: 10
  Text {
    anchors.centerIn: parent
    font.pointSize: 12
    text:"改变行为"
  }
  Behavior on x { //(e)
    PropertyAnimation {
      duration: 1000 //运动时间为1秒
      easing.type: Easing.InQuart //加速运动
    }
  }
  Behavior on y { //应用到y轴方向的运动行为
    PropertyAnimation {
      duration: 1000
      easing.type: Easing.InQuart
    }
  }
}

其中，

• (a) PropertyAnimation on x{…}: 一个动画被应用为属性值源，要使用“动画元素on属性”语法，本例Rect1的运动就使用了这个方法。这里在Rect1的x属性上应用了PropertyAnimation 来使它从起始值（50）在30000毫秒中使用动画变化到500。Rect1一旦加载完成就会开启该动画，PropertyAnimation的loops属性指定为Animation.Infinite,表明该动画是无限循环的。指定一个动画作为属性值源，在一个对象加载完成后立即就对一个属性使用动画变化到一个指定的值的情况是非常有用的。
• (b) easing.type: Easing.OutBounce:对于任何基于PropertyAnimation的动画都可以通过设置easing属性来控制在属性值动画中使用的缓和曲线。它们可以影响这些属性值的动画效果，提供反弹、加速和减速等视觉效果。这里通过使用Easing.OutBounce创建了一个动画到达目标值时的反弹效果。在本例代码中，还演示了其他几种（匀速、加速、半程加速过冲后减速）效果。更多类型的特效，请参考QML官方文档，这里就不展开了。
• (c) onClicked: PropertyAnimation{...}:可以在一个信号处理器中创建一个动画，并在接收到信号时触发。这里当MouseArea被单击时则触发PropertyAnimation,在3000毫秒内使用动画将y坐标由30改变为300,并往返重复运动3次。因为动画没有绑定到一个特定的对象或者属性，所以必须指定target和property(或properties)属性的值。
• (d) PropertyAnimation{…}:这是一个独立的动画元素，它像普通QML元素一样被创建，并不绑定到任何对象或属性上。一个独立的动画元素默认是没有运行的，必须使用running属性或start()和stop()方法来明确地运行它。因为动画没有绑定到一个特定的对象或属性上，所以也必须定义target和property(或properties)属性。独立动画在不是对某个单一对象属性应用动画而且需要明确控制动画的开始和停止时刻的情况下是非常有用的。
• (e) Behavior on x { PropertyAnimation{…}}:定义x属性上的行为动画。经常在一个特定的属性值改变时要应用一个动画，在这种情况下，可以使用一个Behavior为一个属性改变指定一个默认的动画。这里，Rectangle拥有一个Behavior对象应用到了它的x和y属性上。每当这些属性改变（这里是在窗口中单击，将当前鼠标位置赋值给矩形x、y坐标）时，Behavior中的PropertyAnimation对象就会应用到这些属性上，从而使Rectangle使用动画效果移动到鼠标单击的位置上。行为动画是在每次响应一个属性值的变化时触发的，对这些属性的任何改变都会触发它们的动画，如果x或y还绑定到了其他属性上，那么这些属性改变时也都会触发动画。

注意：这里PropertyAnimation的from和to属性是不需要指定的，因为已经提供了这些值，分别是Rectangle的当前值和onClicked处理器中设置的新值（接下来会给出代码）。

(3) 编写主程序

打开“main.qml”文件，编写代码如下:

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 640
  height: 480
  visible: true
  title: qsTr("PropertyAnimation")
  Rectangle {
    width: 360
    height: 360
    anchors.fill: parent
    MouseArea {
      id: mouseArea
      anchors.fill: parent
      onClicked: {
        /*将鼠标单击位置的x、y坐标值设为矩形Rect4的新坐标*/
        rect4.x = mouseArea.mouseX;
        rect4.y = mouseArea.mouseY;
      }
    }
    Column { //初始时以列布局排列各矩形
      x: 50; y: 30
      spacing: 5
      Rect1 { } // “属性值源”矩形
      Rect2 { } // “信号处理”矩形
      Rect3 { } // “独立元素”矩形
      Rect4 {id: rect4 } // “改变行为”矩形
    }
  }
}

————————————————

觉得有用的话请关注点赞，谢谢您的支持！

对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！