动画分组
- 例如你想同时运行几个动画并把他们连接起来,或者在一个一个的运行,或者在两个动画之间执行一个脚本。动画分组提供了很好的帮助,作为命名建议可以叫做一组动画
- 有两种方法来分组:平行与 连续。
- 可以使用SequentialAnimation(连续动画)和ParallelAnimation(平行动画)来实现它们,它们作为动画的容器来包含其它的动画元素
平行方式播放动画:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
id:root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property int duration: 3000
ClickedImage{
id:rocket
x:20
y:250
source: "qrc:/new/prefImg/rocket.png"
onClicked: anim.restart()
}
// 平行动画分组
// 平行动画分组里面有两个动画(或者叫一组)
// 这些动画将同时执行
// 这里的效果将是“向右移动”和“向上移动”同时进行
ParallelAnimation{
id:anim
// 向上移动到 20
NumberAnimation{
target: rocket
properties: "y"
to:20
duration: root.duration
}
// 向右移动到 550
NumberAnimation{
target: rocket
properties: "x"
to:550
duration: root.duration
}
}
}
平行动画分组里面有两个动画(或者叫一组),这些动画将同时执行,这里的效果将是“向右移动”和“向上移动”同时进行!
运行>>
两个动画同时执行成功!
接下来试验一下连续动画!
代码:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
id:root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property int duration: 3000
ClickedImage{
id:rocket
x:20
y:250
source: "qrc:/new/prefImg/rocket.png"
onClicked: anim.restart()
}
// 平行动画分组
SequentialAnimation{
id:anim
// 向上移动到 20
NumberAnimation{
target: rocket
properties: "y"
to:20
duration: root.duration
}
// 向右移动到 550
NumberAnimation{
target: rocket
properties: "x"
to:550
duration: root.duration
}
}
}
很简单,就是把 ParallelAnimation 换为了 SequentialAnimation!
运行>>