1、qml动画实现动画应用场景有下面几种:首先假设一个Rectangle,动画是要改变它的x和y值1,Rectangle一旦被创建,就要移动到一个特定的位置2,动画只有在某一个特定的外部行为触发时候才会被触发,例如,鼠标单击某一个控件时候,产生动画,使目标移动到指定的位置3,只有在某一个特定的信号后才触发4,做为一个独立的动画,虽然没有绑定rectangle的运动,但是可以在脚本中加载,开始和停止5,只有在状态改变时候才会触发6,只有在某一个属性改变时候才触发,无论这个属性是通过什么样的方法来改变的7,在一个特定的信号处理器中创建,当接收到对应的信号时候就触发,类似于3下面分别用代码来看几种实现方
2、法:【1】首先是对第一种场景 Rectangle color:red width:360 height:50 PropertyAnimation on xto: 50 ;duration:1000; loops:Animation.Infinite PropertyAnimation on yto: 250 ;duration:1000; loops:Animation.Infinite Rectangle一旦被创建,就立刻从(0,0)坐标移动到(50,250),在一秒时间内【2】第二种场景代码,行为动画,在某一个属性值发生变化时候触发 Rectangle color:red width:36
3、0 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:r
4、ed 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
5、 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
6、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: Transi
7、tion PropertyAnimation properties: y duration:5000 当点击rect的时候,rect和rect1的状态切换到move状态,move状态中的两个PropertyChanges对象定义了rect和rect1的属性改变值,这时候Transition会自动被执行,Transition里面的PropertyAnimation对象会自动将rect和rect1的属性值y切换到对应的值,这里并没有设置from和to值,在状态开始和结束的时候已经设置了他们的值。另外propertyAnimation并不需要指定target属性,这样任何对象的y值在状态切换时候都会
8、使用这个动画,不过也可以指定一个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 r
9、ect1.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,poi
10、nt,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 RotationA
11、nimation 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) onTri
12、ggered: 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:re
13、ct 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:
14、 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 xto: 50 ;duration:1000; loops:Animation.Infinite PropertyAnimation on yto
15、: 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 wid
16、th: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分别提供并行和串行的动画表现方案。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1