本文介绍的是QML Flipable、Flickable和状态与动画,我们以前接触过QML组件,和一些QML相关的内容,那么本文介绍的内容就很明了了。先来看内容。

AD:51CTO 网+ 第十二期沙龙:大话数据之美_如何用数据驱动用户体验

QML Flipable、Flickable和状态动画是本文要介绍的内容,在接触QML的时候,在前面的例子中我们已经多次提到过状态State了,在这一节中我们再次讲解一下QML状态动画的知识,然后讲解两个特效:Flipable翻转效果和Flickable弹动效果。我们先新建一个Qt QML Application工程,命名为“myAnimation”。本文分为上下篇为大家介绍。

一、状态与动画

在QML中提供了多个实用的动画元素。其列表如下。

下面我们进行简单的讲解。

1.PropertyAnimation 属性动画。

列表中的NumberAnimation 数值动画,ColorAnimation颜色动画和RotationAnimation旋转动画都继承自PropertyAnimation。

例如将程序代码更改如下:

  1. import Qt 4.6
  2. Rectangle {
  3. width: 300;height: 200
  4. Rectangle{
  5. id:page; width:50; height:50
  6. x:0; y:100; color:”red”
  7. PropertyAnimation on x{ to:100; duration:1000 }
  8. }
  9. }

其中的属性动画的代码可以用数值动画来代替:

  1. NumberAnimation on x{ to:100; duration:1000}

顾名思义,数值动画,就是只能对类型为real的属性进行动画设置。例如上面对x属性,使其在1000ms即一秒的时间里由以前的 0 变为100。效果如下:

我们再将属性动画改为:

  1. PropertyAnimation on color{ to:”blue”; duration:1000}

它可以用颜色动画来代替,相当于:

  1. ColorAnimation on color{ to:”blue”; duration:1000}

颜色动画只能用于类型是 color的属性。效果如下:

2、缓冲曲线

我们很多时候不想让动画只是线性的变化,例如实现一些皮球落地,刹车等特殊动画效果,我们就可以在动画中使用缓冲曲线。

例如:

  1. NumberAnimation on x{ to:100; duration:1000
  2. easing.type: “InOutElastic”}

这里的曲线类型有很多种,我们可以查看QML PropertyAnimation Element Reference 关键字,在这个帮助文件中列出了所有的曲线类型。

3、状态过渡动画

我们将程序代码更改如下:

  1. Rectangle {
  2. width: 300;height: 200
  3. Rectangle{
  4. id:page; width:50; height:50
  5. x:0; y:100; color:”red”
  6. MouseArea{id:mouseArea; anchors.fill:parent}
  7. states: State {name: “state1″
  8. when:mouseArea.pressed
  9. PropertyChanges {target: page
  10. x:100;color:”blue”
  11. }
  12. }
  13. transitions: Transition {
  14. from: “”; to: “state1″
  15. NumberAnimation{property:”x”;duration:500}
  16. ColorAnimation{duration:500}
  17. }
  18. }
  19. }

这里我们设置了一个新的状态“state1”,当鼠标在小矩形上按下时进入该状态。这种状态之间的改变我们前面已经讲过。但是我们想让两个状态之间进行变化时成为连续的,具有动画效果,那么就要使用上面的transitions状态过渡。

可以看到,在transitions中我们使用了Transition{}元素,然后从”" 到”state1″ 即从默认状态进入“state1”状态。下面我们分别使用了数值动画和颜色动画,这样当从默认状态过渡到新建状态时,就会变为连续的动画。注意:这里颜色 动画元素中省去了指定颜色属性。

运行程序,效果如下:

4、并行动画

在上面的例子里我们看到,数值动画和颜色动画是并行执行的,其实我们也可以明确指出,让它们并行执行。那就是ParallelAnimation并行动画。上面的代码可以更改为:

  1. ParallelAnimation{
  2. NumberAnimation{property:”x”;duration:500}
  3. ColorAnimation{duration:500}
  4. }

5、序列动画

与上面的并行动画相对应的是序列动画SequentialAnimation,使用它我们可以使两个动画按顺序执行,也就是一个执行完了,另一个才执行。

  1. SequentialAnimation{
  2. NumberAnimation{property:”x”;duration:500}
  3. ColorAnimation{duration:500}
  4. }

这样当红色方块完成移动后再变为蓝色。

6、属性默认动画。

有时我们不希望设置固定的状态,而是想当一个属性改变时,它就能执行默认的动画。那么我们就可以使用Behavior{}元素。我们将程序代码更改如下:

  1. Rectangle {
  2. width: 300;height: 200
  3. Rectangle{
  4. id:page; width:50; height:50; y:100; color:”red”
  5. x:mouseArea.pressed?100:0;
  6. MouseArea{id:mouseArea; anchors.fill:parent}
  7. Behavior on x { NumberAnimation{ duration:500} }
  8. }
  9. }

这里使鼠标按下时属性x为100,并设置了x的默认动画,这样只要x发生了变化,它就会执行默认的动画。

7、其他动画元素。

在开始的动画元素列表中还有其他一些动画元素没有讲到,我们会在后面的应用中使用到它们。你也可以先查看一下它们的帮助文档。

小结:QML Flipable、Flickable和状态动画 上篇的内容介绍完了,请继续参考 QML Flipable、Flickable和状态与动画 下篇 ,希望本篇文章对你一偶帮助!

QML Flipable、Flickable和状态与动画 上篇的更多相关文章

  1. QML Flipable、Flickable和状态与动画 下篇

    本文介绍的是Flickable和状态与动画,我们以前接触过QML相关的内容,那么本文介绍的内容就很明了了.先来看内容. AD: Flickable和状态与动画 下篇是本节要介绍的内容,Flickabl ...

  2. Windows Phone开发(39):漫谈关键帧动画上篇

    原文:Windows Phone开发(39):漫谈关键帧动画上篇 尽管前面介绍的几种动画会让觉得很好玩了,但是,不知道你是否发现,在前面说到的一系列XXXAnimation中,都有一个共同点,那就是仅 ...

  3. QQ去除未读状态的动画

    QQ去除未读状态的动画 by 伍雪颖 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmFpbmxlc3Zpbw==/font/5a6L5L2T/fonts ...

  4. 锋利的jQuery-4--停止动画和判断是否处于动画状态(防止动画加入队列过多的办法)

    1.停止元素的动画:stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列,第二个参数代表是否直接将正在执行的动画跳转到末状态. 无参数stop():立即停 ...

  5. QML中的state 状态

    QML中的状态其实很好理解,任何事物在某一事件都是有一个状态的. 比如你看到的一个窗口,这个时候里面的文字和图片正处于某个状态中.比如一个超链接,你点击了,发现颜色变了,你按了Ctrl+A,整个窗体好 ...

  6. 关于Unity中Mecanim动画的动画状态代码控制与代码生成动画控制器

    对于多量的.复杂的.有规律的控制器使用代码生成 动画状态代码控制 1:每个动画状态,比如进入状态,离开状态, 等都有可能需要代码来参与和处理,比如,进入这个动画单元后做哪些事情,来开这个动画单元后做哪 ...

  7. Unity3D动画面板编辑器状态属性对照表

    不推荐用AnimationUtility.SetEditorCurve问题很多,推荐AnimationCurve.AddKey.通过AnimationUtility.GetAllCurves可以获得编 ...

  8. Unity3D之Mecanim动画系统学习笔记(五):Animator Controller

    简介 Animator Controller在Unity中是作为一种单独的配置文件存在的文件类型,其后缀为controller,Animator Controller包含了以下几种功能: 可以对多个动 ...

  9. 关键帧动画:@keyframes

    关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. 安装CocoaPods流程及常见问题(Xcode->homebrew->RVM->Ruby->CocoaPods)

    一.HomeBrew 1.(转)HomeBrew的安装和简单使用 http://blog.csdn.net/maojudong/article/details/7918291 2.homebrew的简 ...

  2. java泛型操作复习,以及讲解在android中使用的场景

    android使用泛型的地方很多,比如集成自BaseAdapter实现封装的Adapter,对常用操作进行封装,但是需要对传进来的数据进行处理,此时就使用到泛型,示例如下: public abstra ...

  3. hadoop参数配置

    Hadoop参数汇总 linux参数 JVM参数 Hadoop参数大全 core-default.xml hdfs-default.xml yarn-default.xml Hadoop参数汇总 @( ...

  4. sqlalchemy 映射的小例子

    1.多张表映射到一个类 import pandas as pdfrom settings import DATABASESfrom sqlalchemy import create_engineimp ...

  5. 关于闭包与for循环的理解

    function createFunction1(){ for(var i=0;i<5;i++){ function s(){ console.log(i); } s(); } } create ...

  6. iOS开发瀑布流的实现

    //自定义布局,继承于UICollectionViewLayout #import <UIKit/UIKit.h> @class WaterFlowLayout; @protocol  W ...

  7. Babel 相关资料

    Babel online editor Babel Plugin Handbook babeljs usage options

  8. Centos虚拟机安装分区分配

    i 安装hadoop虚拟机

  9. 核心梳理——消息处理的骨架流程——ESFramework 4.0 进阶(02)

    在ESFramework 4.0 概述一文中,我们提到ESFramework.dll作为通信框架的核心,定义了消息处理的骨架流程,本文我们来详细剖析这个流程以及该骨架中所涉及的各个组件.ESFrame ...

  10. Python 文本处理的应用

    最近根据公司运营部需求要对mongo数据库中的相关信息进行统计,本人一般喜欢将数据库服务器中相关的数据导出来(PS:其一由于Mongo为Nosql,在涉及关联表时不好处理,其二是因为虽然为测试环境,但 ...