新浪微博
腾讯微博
会员列表
统计排行
基本信息
到访IP统计
管理团队
管理统计
在线会员
会员排行
版块排行
帖子排行
标签排行
帮助
下拉
用户名
电子邮箱
用户名
密 码
记住登录
登录
找回密码
注册
快捷通道
关闭
您还没有登录,快捷通道只有在登录后才能使用。
立即登录
还没有帐号? 赶紧
注册一个
首页
论坛
Qt下载
作品展
群组
个人中心
捐赠、管理与开发
邮件订阅
帖子
文章
日志
用户
版块
群组
帖子
搜索
QTCN开发网
>
Qt QML开发
>
propertyAnimation的几种常用用法
发帖
回复
返回列表
新帖
4211
阅读
1
回复
propertyAnimation的几种常用用法
[复制链接]
上一主题
下一主题
离线
seanyxie
UID:153146
注册时间
2014-06-18
最后登录
2015-01-07
在线时间
20小时
发帖
38
搜Ta的帖子
精华
0
金钱
416
威望
50
贡献值
0
好评度
40
访问TA的空间
加好友
用道具
新手上路
关闭
个人中心可以申请新版勋章哦
立即申请
知道了
加关注
发消息
只看楼主
倒序阅读
楼主
发表于: 2014-07-15
总结一下
propertyAnimation的几种常用用法
动画应用场景有下面几种:
首先假设一个Rectangle,动画是要改变它的x和y值
1,Rectangle一旦被创建,就要移动到一个特定的位置
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一旦被创建,就立刻从(0,0)坐标移动到(50,250),在一秒时间内
【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
:
parentonClicked
:{
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
:
parentonClicked
:
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
:
animationtarget
:
rectproperties
:
"width"
duration
:
1000
}
MouseArea
{
anchors
.
fill
:
parentonClicked
:
{
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
:
parentonClicked
:
{
console
.
log
(
"dddd"
)
rect
.
state
=
"move"
rect1
.
height
=
50
rect1
.
state
=
"move"
}
}
states
:[
State
{
name
:
"move"
PropertyChanges
{
target
:
recty
:
250
}
PropertyChanges
{
target
:
rect1y
:
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
:
parentonClicked
:
{
console
.
log
(
"dddd"
)
rect
.
state
=
"move"
rect1
.
height
=
50
rect1
.
state
=
"move"
}
}
states
:[
State
{
name
:
"move"
}
]
transitions
:
[
Transition
{
PropertyAnimation
{
target
:
rectfrom
:
0
to
:
250
properties
:
"y"
duration
:
5000
}
PropertyAnimation
{
target
:
rect1properties
:
"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.2
import
QtQuick
.
Controls
1.1
ApplicationWindow
{
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
:
parentonClicked
:
{
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
:
rectfrom
:
0
to
:
250
properties
:
"y"
duration
:
5000
easing
.
type
:
Easing
.
OutBounce
}
PropertyAnimation
{
target
:
rect1properties
:
"y"
from
:
100
to
:
330
duration
:
2000
easing
.
type
:
Easing
.
OutBounce
}
}
]
}
}
/*//初始化就触发的动画Rectangle{color:"red"width:360height:50PropertyAnimation on x{to: 50 ;duration:1000; loops:Animation.Infinite }PropertyAnimation on y{to: 250 ;duration:1000; loops:Animation.Infinite }}*/
/*Rectangle{color:"red"width:360height:50id:rectBehavior on x {PropertyAnimation{ duration : 1000 }}Behavior on y {PropertyAnimation{ duration : 1000 }}}MouseArea{anchors.fill: parentonClicked:{rect.x=mouse.x;rect.y=mouse.y;}}*/
/*Rectangle{color:"red"width:360height:50id:rectMouseArea{anchors.fill: parentonClicked:PropertyAnimation{target:rect ; properties:"y"to:250duration:1000}}}*/
/*Column{Rectangle{color:"blue"width:360height:50TextInput{anchors.fill: parent}}Rectangle{color:"red"width:360height:50id:rectPropertyAnimation{id:animationtarget:rectproperties: "width"duration: 1000}MouseArea{anchors.fill: parentonClicked: {animation.to=50animation.running=true;}}}}*/
Text
{
text
:
qsTr
(
"Hello World"
)
anchors
.
centerIn
:
parent
}
}
红色的巨型首先经过一个360旋转和变色,然后点击蓝色的巨型,就会像弹簧一样落下来。
刚刚提到Transition中的组合动画,ParalleAnimation和SequentialAnimation分别提供并行和串行的动画表现方案。
共
条评分
我奔向太阳,在日落前必将找到你。
欢迎光临Qt技术博客 http://www.seanyxie.com
回复
举报
分享到
淘江湖
新浪
QQ微博
QQ空间
开心
人人
豆瓣
网易微博
百度
鲜果
白社会
飞信
离线
彩阳
UID:136309
注册时间
2012-09-13
最后登录
2020-04-15
在线时间
2784小时
发帖
1247
搜Ta的帖子
精华
2
金钱
13131
威望
1310
贡献值
11
好评度
1302
访问TA的空间
加好友
用道具
精灵王
加关注
发消息
只看该作者
1楼
发表于: 2014-07-15
引用Qt文档中的,如果Animation和Transition或者Behavior结合使用的话,那么started信号将不会被发出。所以不能在这样的情况下设置onStarted。
共
条评分
上海Qt开发联盟,热忱地欢迎你的加入!
回复
举报
发帖
回复
返回列表
http://www.qtcn.org/bbs
访问内容超出本站范围,不能确定是否安全
继续访问
取消访问
快速回复
限100 字节
您目前还是游客,请
登录
或
注册
进入高级模式
文字颜色
发 布
回复后跳转到最后一页
上一个
下一个
关闭
补充发布信息
验证码:
发 布
隐藏
快速跳转
站务及资讯
网站公告
新闻资讯
Qt官方发布
网站管理
Qt应用及资源
Qt 作品展
Qt代码秀
Qt应用版
Qt技术讨论区
Qt安装与发布
Qt中文处理
Qt基础编程
Qt QML开发
Qt嵌入式开发
Qt移动平台开发
其它技术开发讨论区
Qt图书专区
《C++ GUI Qt 4编程》(第2版)专栏
《Qt高级编程》专栏
《零基础学Qt4编程》专栏
《Qt设计模式》(第2版) 图书专栏
Python Qt GUI快速编程
Qt项目开发区
天池项目
Qt开放平台开发库
Qt版百度云笔记
机械CAD
Qt文档计划
QTCN网站系统开发
扇贝词典
非活跃项目区
社区中心
帖子回收站(Trash)
招聘、求职、供求、广告等
休闲娱乐
关闭
关闭
选中
1
篇
全选