QML --》 动画元素

1、PropertyAnimation(属性动画) - 使用属性值改变播放动画。

2、NumberAnimation(数字动画) - 使用数字改变播放的动画。

3、ColorAnimation(颜色动画) - 使用颜色改变播放的动画。

4、RotationAnimation(旋转动画) - 使用旋转改变播放的动画。

5、PauseAnimation（停止动画）- 运行暂停一个动画。

6、SequentialAnimation（顺序动画）- 允许动画有序播放。

7、ParallelAnimation（并行动画）- 允许动画同时播放。

8、AnchorAnimation（锚定动画）- 使用锚定改变播放的动画。

9、ParentAnimation（父元素动画）- 使用父对象改变播放的动画。

10、SmotthedAnimation（平滑动画）- 跟踪一个平滑值播放的动画。

11、SpringAnimation（弹簧动画）- 跟踪一个弹簧变换的值播放的动画。

12、PathAnimation（路径动画）- 跟踪一个元素对象的路径的动画。

13、Vector3dAnimation（3D容器动画）- 使用QVector3d值改变播放的动画。

import QtQuick 2.0

Image {
    source: "./2.png"
    Image {
        x:40;y:80;
        source: "./1.png"
        NumberAnimation on x{　　// 数字动画
            to:1200;　　//(x)
            duration: 20000;　　// 时间
            loops: Animation.Infinite;
        }
        RotationAnimation on rotation {　　// 旋转动画
            to:720;   // 角度
            duration: 4000;　　// 时间
            loops: Animation.Infinite;
        }
    }
}

通过to属性和duration属性来实现动画效果。

 

 

 

2、

Item {
    id: root
    width: container.childrenRect.width
    height: container.childrenRect.height
    property alias text: label.text　　// 提取出Text的text属性
    property alias source: image.source　　// 提取image的图片源
    signal clicked　　// 提取点击信号
    Column {　　// 列定位器
        id: container
        Image {
            id: image
        }
        Text {
            id: label
            width: image.width
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap　　// wrapMode属性来设置文本与图像一样宽并且可以自动换行。
            color: "#111111"
        }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}

 

import QtQuick 2.0

Rectangle{
    Clickable{
        id:rock1
        x:40;y:200;
        source: "./1.png"
        text:"xxx";
        NumberAnimation on y{
            to:40;
            duration: 4000;
        }
    }
    Clickable{
        id:rock2
        x:640;y:200;
        source: "./1.png"
        text:"xxx";
        Behavior on y{
            NumberAnimation{duration: 4000}　　// 持续时间4000ms
        }
        onClicked: y = 40+Math.random()*(205-40)　　// 生成随机数
    }
}

 

Clickable {
        id: rocket3
        x: 1000; y: 200
        source: "./1.png"
        onClicked: anim.start()
//        onClicked: anim.restart()
        text: "standalone animation"
        NumberAnimation {
            id: anim
            target: rocket3
            properties: "y"
            from: 205
            to: 40
            duration: 4000
        }
    }

properties: "y" ----》表示y轴方向
from .... to.... 从哪里到哪里
duration 持续时间

anim.start() 开始

另一个启动/停止一个动画的方法是绑定一个动画的running属性。
例如：

NumberAnimation{
    running: area.pressed;
}
MouseArea{
    id:area;
}