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" ...
随机推荐
- 安装CocoaPods流程及常见问题(Xcode->homebrew->RVM->Ruby->CocoaPods)
一.HomeBrew 1.(转)HomeBrew的安装和简单使用 http://blog.csdn.net/maojudong/article/details/7918291 2.homebrew的简 ...
- java泛型操作复习,以及讲解在android中使用的场景
android使用泛型的地方很多,比如集成自BaseAdapter实现封装的Adapter,对常用操作进行封装,但是需要对传进来的数据进行处理,此时就使用到泛型,示例如下: public abstra ...
- hadoop参数配置
Hadoop参数汇总 linux参数 JVM参数 Hadoop参数大全 core-default.xml hdfs-default.xml yarn-default.xml Hadoop参数汇总 @( ...
- sqlalchemy 映射的小例子
1.多张表映射到一个类 import pandas as pdfrom settings import DATABASESfrom sqlalchemy import create_engineimp ...
- 关于闭包与for循环的理解
function createFunction1(){ for(var i=0;i<5;i++){ function s(){ console.log(i); } s(); } } create ...
- iOS开发瀑布流的实现
//自定义布局,继承于UICollectionViewLayout #import <UIKit/UIKit.h> @class WaterFlowLayout; @protocol W ...
- Babel 相关资料
Babel online editor Babel Plugin Handbook babeljs usage options
- Centos虚拟机安装分区分配
i 安装hadoop虚拟机
- 核心梳理——消息处理的骨架流程——ESFramework 4.0 进阶(02)
在ESFramework 4.0 概述一文中,我们提到ESFramework.dll作为通信框架的核心,定义了消息处理的骨架流程,本文我们来详细剖析这个流程以及该骨架中所涉及的各个组件.ESFrame ...
- Python 文本处理的应用
最近根据公司运营部需求要对mongo数据库中的相关信息进行统计,本人一般喜欢将数据库服务器中相关的数据导出来(PS:其一由于Mongo为Nosql,在涉及关联表时不好处理,其二是因为虽然为测试环境,但 ...