QML Flipable、Flickable和状态与动画 上篇
本文介绍的是QML Flipable、Flickable和状态与动画,我们以前接触过QML组件,和一些QML相关的内容,那么本文介绍的内容就很明了了。先来看内容。
QML Flipable、Flickable和状态与动画是本文要介绍的内容,在接触QML的时候,在前面的例子中我们已经多次提到过状态State了,在这一节中我们再次讲解一下QML中状态和动画的知识,然后讲解两个特效:Flipable翻转效果和Flickable弹动效果。我们先新建一个Qt QML Application工程,命名为“myAnimation”。本文分为上下篇为大家介绍。
一、状态与动画
在QML中提供了多个实用的动画元素。其列表如下。
下面我们进行简单的讲解。
1.PropertyAnimation 属性动画。
列表中的NumberAnimation 数值动画,ColorAnimation颜色动画和RotationAnimation旋转动画都继承自PropertyAnimation。
例如将程序代码更改如下:
- import Qt 4.6
- Rectangle {
- width: 300;height: 200
- Rectangle{
- id:page; width:50; height:50
- x:0; y:100; color:”red”
- PropertyAnimation on x{ to:100; duration:1000 }
- }
- }
其中的属性动画的代码可以用数值动画来代替:
- NumberAnimation on x{ to:100; duration:1000}
顾名思义,数值动画,就是只能对类型为real的属性进行动画设置。例如上面对x属性,使其在1000ms即一秒的时间里由以前的 0 变为100。效果如下:
我们再将属性动画改为:
- PropertyAnimation on color{ to:”blue”; duration:1000}
它可以用颜色动画来代替,相当于:
- ColorAnimation on color{ to:”blue”; duration:1000}
颜色动画只能用于类型是 color的属性。效果如下:
2、缓冲曲线
我们很多时候不想让动画只是线性的变化,例如实现一些皮球落地,刹车等特殊动画效果,我们就可以在动画中使用缓冲曲线。
例如:
- NumberAnimation on x{ to:100; duration:1000
- easing.type: “InOutElastic”}
这里的曲线类型有很多种,我们可以查看QML PropertyAnimation Element Reference 关键字,在这个帮助文件中列出了所有的曲线类型。
3、状态过渡动画
我们将程序代码更改如下:
- Rectangle {
- width: 300;height: 200
- Rectangle{
- id:page; width:50; height:50
- x:0; y:100; color:”red”
- MouseArea{id:mouseArea; anchors.fill:parent}
- states: State {name: “state1″
- when:mouseArea.pressed
- PropertyChanges {target: page
- x:100;color:”blue”
- }
- }
- transitions: Transition {
- from: “”; to: “state1″
- NumberAnimation{property:”x”;duration:500}
- ColorAnimation{duration:500}
- }
- }
- }
这里我们设置了一个新的状态“state1”,当鼠标在小矩形上按下时进入该状态。这种状态之间的改变我们前面已经讲过。但是我们想让两个状态之间进行变化时成为连续的,具有动画效果,那么就要使用上面的transitions状态过渡。
可以看到,在transitions中我们使用了Transition{}元素,然后从”" 到”state1″ 即从默认状态进入“state1”状态。下面我们分别使用了数值动画和颜色动画,这样当从默认状态过渡到新建状态时,就会变为连续的动画。注意:这里颜色 动画元素中省去了指定颜色属性。
运行程序,效果如下:
4、并行动画
在上面的例子里我们看到,数值动画和颜色动画是并行执行的,其实我们也可以明确指出,让它们并行执行。那就是ParallelAnimation并行动画。上面的代码可以更改为:
- ParallelAnimation{
- NumberAnimation{property:”x”;duration:500}
- ColorAnimation{duration:500}
- }
5、序列动画
与上面的并行动画相对应的是序列动画SequentialAnimation,使用它我们可以使两个动画按顺序执行,也就是一个执行完了,另一个才执行。
- SequentialAnimation{
- NumberAnimation{property:”x”;duration:500}
- ColorAnimation{duration:500}
- }
这样当红色方块完成移动后再变为蓝色。
6、属性默认动画。
有时我们不希望设置固定的状态,而是想当一个属性改变时,它就能执行默认的动画。那么我们就可以使用Behavior{}元素。我们将程序代码更改如下:
- Rectangle {
- width: 300;height: 200
- Rectangle{
- id:page; width:50; height:50; y:100; color:”red”
- x:mouseArea.pressed?100:0;
- MouseArea{id:mouseArea; anchors.fill:parent}
- Behavior on x { NumberAnimation{ duration:500} }
- }
- }
这里使鼠标按下时属性x为100,并设置了x的默认动画,这样只要x发生了变化,它就会执行默认的动画。
7、其他动画元素。
在开始的动画元素列表中还有其他一些动画元素没有讲到,我们会在后面的应用中使用到它们。你也可以先查看一下它们的帮助文档。
小结:QML Flipable、Flickable和状态与动画 上篇的内容介绍完了,请继续参考 QML Flipable、Flickable和状态与动画 下篇 ,希望本篇文章对你一偶帮助!
QML Flipable、Flickable和状态与动画 上篇的更多相关文章
- QML Flipable、Flickable和状态与动画 下篇
本文介绍的是Flickable和状态与动画,我们以前接触过QML相关的内容,那么本文介绍的内容就很明了了.先来看内容. AD: Flickable和状态与动画 下篇是本节要介绍的内容,Flickabl ...
- Windows Phone开发(39):漫谈关键帧动画上篇
原文:Windows Phone开发(39):漫谈关键帧动画上篇 尽管前面介绍的几种动画会让觉得很好玩了,但是,不知道你是否发现,在前面说到的一系列XXXAnimation中,都有一个共同点,那就是仅 ...
- QQ去除未读状态的动画
QQ去除未读状态的动画 by 伍雪颖 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmFpbmxlc3Zpbw==/font/5a6L5L2T/fonts ...
- 锋利的jQuery-4--停止动画和判断是否处于动画状态(防止动画加入队列过多的办法)
1.停止元素的动画:stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列,第二个参数代表是否直接将正在执行的动画跳转到末状态. 无参数stop():立即停 ...
- QML中的state 状态
QML中的状态其实很好理解,任何事物在某一事件都是有一个状态的. 比如你看到的一个窗口,这个时候里面的文字和图片正处于某个状态中.比如一个超链接,你点击了,发现颜色变了,你按了Ctrl+A,整个窗体好 ...
- 关于Unity中Mecanim动画的动画状态代码控制与代码生成动画控制器
对于多量的.复杂的.有规律的控制器使用代码生成 动画状态代码控制 1:每个动画状态,比如进入状态,离开状态, 等都有可能需要代码来参与和处理,比如,进入这个动画单元后做哪些事情,来开这个动画单元后做哪 ...
- Unity3D动画面板编辑器状态属性对照表
不推荐用AnimationUtility.SetEditorCurve问题很多,推荐AnimationCurve.AddKey.通过AnimationUtility.GetAllCurves可以获得编 ...
- Unity3D之Mecanim动画系统学习笔记(五):Animator Controller
简介 Animator Controller在Unity中是作为一种单独的配置文件存在的文件类型,其后缀为controller,Animator Controller包含了以下几种功能: 可以对多个动 ...
- 关键帧动画:@keyframes
关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
随机推荐
- eclipse 使用hadoop-plugins 插件出现EOFException问题
相当郁闷的一个问题,之前也看了好多外国的网站,也没有解答 主要出在了使用http访问 http://192.168.5.128:50030/jobtracker.jsp http://192.168. ...
- 奇葩json结构解析--key是数字的json处理
json结构如下: { "ret": "ok", "data": { "57230": { "cat_id&q ...
- HDU 5821 Ball
记录一下每个位置最终到达的位置.然后每次操作排序. #pragma comment(linker, "/STACK:1024000000,1024000000") #include ...
- 神器XPath在Python下的使用
1.在python下使用xpath,需安装第三方库lxml 2.安装后,导入from lxml import etree selector=etree.HTML(html) Selector.xpat ...
- 关于JavaScript语法的小笔记
1.pop() 函数用来移出数组中最后一个元素:shift() 函数移出数组中的第一项,unshift(移入)一个元素到数组的头部. 例如: ], []]; var a=myArray.pop(); ...
- ubuntu 14.04 32位库
如果是ubuntu 14.04,则请先执行: 方法1: sudo gedit /etc/apt/sources.list 然后在最后添加上: deb http://archive.ubuntu.com ...
- Linux添加软件连接方法
这是linux中一个非常重要命令,请大家一定要熟悉.它的功能是为某一个文件或目录在另外一个位置建立一个同步的链接,类似Windows下的超级链接. 这个命令最常用的参数是-s,具体用法是:sudo l ...
- 国外vps品牌vultr宣布100%可用,宕机加倍补偿
全球知名的vps品牌vultr最近发狠招了,宣布所有vps服务器保证100%上线可用.如果出现宕机故障,提供加倍补偿方案.没有一家vps敢声称自己的产品100%可用,行业标准99.99%上线率已经是非 ...
- NOIP2011-普及组复赛-第二题-统计单词数
题目描述 Description 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给 ...
- SharePoint2013基于Form(FBA)的AD认证登陆
来源于:http://www.haogongju.net/art/1964313 1. 使用SharePoint2013实现基于AD的Form认证,首先创建一个Web Application,步骤如下 ...