qml 中 PropertyAnimation 的几种用法

Question

动画应用场景有下面几种：

首先假设一个 Rectangle，动画是要改变它的 x 和 y 值

1. Rectangle 一旦被创建，就要移动到一个特定的位置
2. 动画只有在某一个特定的外部行为触发时候才会被触发，例如，鼠标单击某一个控件时候，产生动画，使目标移动到指定的位置
3. 只有在某一个特定的信号后才触发
4. 做为一个独立的动画，虽然没有绑定 rectangle 的运动，但是可以在脚本中加载，开始和停止
5. 只有在状态改变时候才会触发
6. 只有在某一个属性改变时候才触发，无论这个属性是通过什么样的方法来改变的
7. 在一个特定的信号处理器中创建，当接收到对应的信号时候就触发，类似于 3

下面分别用代码来看几种实现方法：

1、首先是对第一种场景

Rectangle{
  color:"red"
  width:360
  height:50

  PropertyAnimation on x{to: 50 ;duration:1000; loops:Animation.Infinite }
  PropertyAnimation on y{to: 250 ;duration:1000; loops:Animation.Infinite }
    }

Rectangle 一旦被创建，就立刻从（0，0）坐标移动到（50，250），在一秒时间内

2、第二种场景代码，行为动画，在某一个属性值发生变化时候触发

Rectangle{
    color:"red"
    width:360
    height:50
    id:rect
    Behavior on x {
      PropertyAnimation{ duration : 1000 }
    }

    Behavior on y {
      PropertyAnimation{ duration : 1000 }
    }


  }

  MouseArea{
    anchors.fill: parent
    onClicked:{
      rect.x=mouse.x;
      rect.y=mouse.y;
    }
  }

这段代码实现了，在点击了屏幕上的一点后，rect 会在一秒的时间内触发动画，到达鼠标所点击的位置，因为在 onClicked 里面，我们修改了 rect 的 x 和 y 值。

3、在信号处理器中触发动画

  Rectangle{
  color:"red"
  width:360
  height:50
  id:rect

  MouseArea{
      anchors.fill: parent
      onClicked:

    PropertyAnimation{
        target:rect ;  properties:"y"
        to:250
        duration:1000
    }

  }
    }

当点击 rect 的时候，就会触发动画，使 rect 的 y 从 0 运动到 250

4、动画 作为一个独立的动画，可以像创建普通的 QML 对象一样创建，而不需要绑定特定的对象和属性。

Rectangle{
      color:"red"
      width:360
      height:50
      id:rect

      PropertyAnimation{
        id:animation
        target:rect
        properties: "width"
        duration: 1000

      }

      MouseArea{
        anchors.fill: parent
        onClicked: {
          animation.to=50
          animation.running=true;
        }
      }


    }

一个独立的动画对象默认是没有运行的，必须使用 running 属性，或者 start() stop（）来运行它。

5、切换 ，切换用来设置当状态发生改变时候，需要创建一个切换，Transition 对象。然后把它添加到对象的 transition 属性下面，代码

Rectangle{
    Rectangle{
      color:"gray"
      y:100
      width:360
      height:80
      id:rect1
    }
  
    //切换状态
    Rectangle{
      color:"steelblue"
      width:360
      height:80
      id:rect
  
      MouseArea{
        anchors.fill: parent
        onClicked: {
          console.log("dddd")
          rect.state="move"
          rect1.height=50
          rect1.state="move"
        }
      }
  
        states:[
          State{
          name:"move"
          PropertyChanges{
            target:rect
            y:250
          }
          PropertyChanges{
            target:rect1
            y:330
          }
        }
  
        ]
  
        transitions: [
          Transition {
            PropertyAnimation{
              properties: "y"
              duration:5000
            }
          }
        ]
  
    }
  }

当点击 rect 的时候，rect 和 rect1 的状态切换到 move 状态，move 状态中的两个 PropertyChanges 对象定义了 rect 和 rect1 的属性改变值，这时候 Transition 会自动被执行，Transition 里面的 PropertyAnimation 对象会自动将 rect 和 rect1 的属性值 y 切换到对应的值，这里并没有设置 from 和 to 值，在状态开始和结束的时候已经设置了他们的值。

另外 propertyAnimation 并不需要指定 target 属性，这样任何对象的 y 值在状态切换时候都会使用这个动画，不过也可以指定一个 target 来使用这个动画，另外在 Transition 里面的东辉会并行执行，如果要串行执行，可以使用 SequentiaAnimation.这个代码也可以这样来写：

Rectangle{
    Rectangle{
      color:"gray"
      y:100
      width:360
      height:80
      id:rect1
    }

    //切换状态
    Rectangle{
      color:"steelblue"
      width:360
      height:80
      id:rect

      MouseArea{
        anchors.fill: parent
        onClicked: {
          console.log("dddd")
          rect.state="move"
          rect1.height=50
          rect1.state="move"
        }
      }

        states:[
          State{
          name:"move"
        }

        ]

        transitions: [
          Transition {
            PropertyAnimation{
              target:rect
              from:0
              to:250
              properties: "y"
              duration:5000
            }

            PropertyAnimation{
              target:rect1
              properties: "y"
              from:100
              to:330
              duration:2000
            }
          }
        ]

    }
  }

6、属性动画元素

PropertyAnimation 元素是用来为属性提供动画最基本动画元素，他可以为 real ,int ,color,rect,point,sized,vector3d 来提供动画设置。

它可以被 NumberAnimation,ColorAnimation,RotationAnimation,Vector3dAnimation 等继承，他们分别提供了更高效的属性动画实现方式。并且任何基于 PropertyAnimation 的对象都可以设置 easing 属性来动画中使用的缓和曲线。

例如：

Rectangle{
  color:"gray"
  y:100
  width:360
  height:80
  id:rect1

  ColorAnimation on color { from: "white"; to: "red"; duration: 5000 }
  RotationAnimation on rotation{
      from:0
      to:360
      direction: RotationAnimation.Clockwise
      duration:5000
  }
        }

下面是代码整体合起来和运行效果：

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
  visible: true
  width: 360
  height: 480
  title: qsTr("Hello World")

  menuBar: MenuBar {
    Menu {
      title: qsTr("File")
      MenuItem {
        text: qsTr("Exit")
        onTriggered: Qt.quit();
      }
    }
  }



  Rectangle{
    Rectangle{
      color:"gray"
      y:100
      width:360
      height:80
      id:rect1

      ColorAnimation on color { from: "white"; to: "red"; duration: 5000 }
      RotationAnimation on rotation{
        from:0
        to:360
        direction: RotationAnimation.Clockwise
        duration:5000
      }
    }

    //切换状态
    Rectangle{
      color:"steelblue"
      width:360
      height:80
      id:rect

      MouseArea{
        anchors.fill: parent
        onClicked: {
          console.log("dddd")
          rect.state="move"
          rect1.height=50
          rect1.state="move"
        }
      }

        states:[
          State{
          name:"move"
        //	PropertyChanges{
         //	   target:rect
           //   y:250
         //   }
         //   PropertyChanges{
         //	   target:rect1
          //	y:330
         //   }

        }

        ]

        transitions: [
          Transition {
            PropertyAnimation{
              target:rect
              from:0
              to:250
              properties: "y"
              duration:5000
               easing.type: Easing.OutBounce
            }

            PropertyAnimation{
              target:rect1
              properties: "y"
              from:100
              to:330
              duration:2000
              easing.type: Easing.OutBounce
            }
          }
        ]

    }
  }

  /*
  //初始化就触发的动画
  Rectangle{
    color:"red"
    width:360
    height:50

    PropertyAnimation on x{to: 50 ;duration:1000; loops:Animation.Infinite }
    PropertyAnimation on y{to: 250 ;duration:1000; loops:Animation.Infinite }
  }
  */

  /*
  Rectangle{
    color:"red"
    width:360
    height:50
    id:rect
    Behavior on x {
      PropertyAnimation{ duration : 1000 }
    }

    Behavior on y {
      PropertyAnimation{ duration : 1000 }
    }


  }

  MouseArea{
    anchors.fill: parent
    onClicked:{
      rect.x=mouse.x;
      rect.y=mouse.y;
    }
  }

  */
  /*
  Rectangle{
    color:"red"
    width:360
    height:50
    id:rect

    MouseArea{
      anchors.fill: parent
      onClicked:
        PropertyAnimation{
          target:rect ;  properties:"y"
          to:250
          duration:1000
        }

    }
  }
  */
  /*
  Column{
    Rectangle{
      color:"blue"
      width:360
      height:50
      TextInput{
        anchors.fill: parent
      }
    }

    Rectangle{
      color:"red"
      width:360
      height:50
      id:rect

      PropertyAnimation{
        id:animation
        target:rect
        properties: "width"
        duration: 1000

      }

      MouseArea{
        anchors.fill: parent
        onClicked: {
          animation.to=50
          animation.running=true;
        }
      }


    }
  }
  */

  Text {
    text: qsTr("Hello World")
    anchors.centerIn: parent
  }
}

红色的矩形首先经过一个 360 旋转和变色，然后点击蓝色的巨型，就会像弹簧一样落下来。

刚刚提到 Transition 中的组合动画， ParalleAnimation 和 SequentialAnimation 分别提供并行和串行的动画表现方案。