QML系列五：Animation Types

Animation Types

一些基础动画类型

• SequentialAnimation 顺序执行动画，只是个容器，内部需要具体动画做支撑，见下面demo
• ParallelAnimation 并行动画，与SequentialAnimation一样，只是个容器，内部需要具体动画做支撑
• PropertyAnimation 属性动画，是某些具体属性动画的基类
  • ColorAnimation 颜色属性动画
  • NumberAnimation 数值属性动画
  • RotationAnimation 旋转动画
  • Vector3DAnimation 3D矢量动画

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
   
    title: qsTr("Image Bounce")
    id: root
    width: 120; height: 300;
    visible: true

    Image {
   
        id: img
        source: "qrc:/images/face-smile.png"
        anchors.horizontalCenter: parent.horizontalCenter
        y: 0

        MouseArea {
   
            anchors.fill: parent
            // Toggle animation on/off when clicked
            onClicked: anim.running = !anim.running
        }

        // SequentialAnimation作为1个容器，其内部的3个动画会顺序执行
        SequentialAnimation on y {
   
            id: anim
            running: false; loops: Animation.Infinite
            YAnimator {
   
                easing.amplitude: 1.6
                to: 300-img.height; easing.type: Easing.InOutElastic; duration: 2000
            }
            PauseAnimation {
    duration: 1000 }
            YAnimator {
   
                to: 0; easing.type: Easing.OutQuad; duration: 1000
            }
        }
    }
}

其他灵活特殊的动画类型

• SpringAnimation 弹性动画
• PauseAnimation 暂停动画
• AnchorAnimation 布局动画
• ParentAnimation 动态改变一个元素的父类，其实是个步骤，没有动画效果

 import QtQuick 2.4
import QtQuick.Window 2.2

Window {
   
    title: qsTr("Parent Change")