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;
}