动画应用场景有下面几种
首先假设一个Rectangle动画是要改变它的x和y值
1Rectangle一旦被创建就要移动到一个特定的位置
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一旦被创建就立刻从00坐标移动到50250在一秒时间内
【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.2import QtQuick.Controls 1.1ApplicationWindow {
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分别提供并行和串行的动画表现方案。
查看更多QML动画使用方法
