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" ...
随机推荐
- POJ 1704 Georgia and Bob(阶梯博弈+证明)
POJ 1704 题目链接 关于阶梯博弈有如下定理: 将所有奇数阶梯看作n堆石头,做Nim,将石头从奇数堆移动到偶数堆看作取走石头,同样地,异或值不为0(利己态)时,先手必胜. 定理证明看此博:htt ...
- WebApi 跨域问题解决方案:CORS
注:本文为个人学习摘录,原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看W ...
- Openjudge-计算概论(A)-比饭量
描述: 3个人比饭量,每人说了两句话: A说:B比我吃的多,C和我吃的一样多 B说:A比我吃的多,A也比C吃的多 C说:我比B吃得多,B比A吃的多. 事实上,饭量和正确断言的个数是反序的关系. 请编程 ...
- ubuntu下安装UltraEdit
在windows下常年使用UltraEdit来查看log,现在突然切换到ubuntu下,系统自带的Text Editor相当不适应:只有自己安装了. 首先,需要下载安装包,可以去:http://www ...
- 【Python爬虫实战--2】时间戳转换为指定格式日期
摘自:http://www.2cto.com/kf/201406/311477.html (1)方法: 方法一: 利用localtime()转换为时间数组,然后格式化为需要的格式,如 timeStam ...
- yii2.0图片上传
在根目录下夹uploads文件夹 控制器 UploadController.php <?php namespace frontend\controllers; use Yii; use fron ...
- iOS使用Swift语言检查并提示更新
项目要上线了,产品要求跟安卓一样,一进去有一个提示框提示更新.虽然苹果在 Settings/iTunes Store & App Store 选项中有自动更新这一选项,而且添加版本号等等有被拒 ...
- Objective-C和Swift实现单例的几种方式
在Swift开发中,我们对于跨类调用的变量常量,因为并没有OC中使用的全局头文件中写宏的形式,我们一般采用在类外定义全局变量/常量的形式来跨类调用.而问题在于目前写的项目需要在新添加的OC写的功能模块 ...
- mac xmind快捷键
tab:新建分支 command +z : 撤销 command + "+":放大 command + "-":缩小 shift + enter : 文字换行
- linux安装文件命令
tar -zxvf apache-tomcat.tar.gz -C /home/poka 注:安装tar.gz的安装包 设置系统自动启动tomcat 切换到root用户,执行命令 #chkconfig ...