QML进阶教程:三、动画分组(Grouped Animations)

标签: Qt QML
32人阅读 评论(0) 收藏 举报
分类:

前言:

如果想同时运行几个动画并把他们连接起来,或者在一个一个的运行,或者在两个动画之间执行一个脚本。动画分组
提供了很好的帮助,有两种方法来分组:平行与连续。可以使用SequentialAnimation(连续动画) 和ParallelAnimation(平行动画) 来实现它们,它们作为动画的容器来包含其它的动画元素。
这里写图片描述

代码实例:

import QtQuick 2.0

Item {
    id: root
    width: 640
    height: 380
    property int duration: 3000

    // M1>>
    Rectangle {
        id: sky
        width: parent.width
        height: 200 
        //设置颜色渐变
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#0080FF" }
            GradientStop { position: 1.0; color: "#66CCFF" }
        }
    }
    Rectangle {
        id: ground
        anchors.top: sky.bottom
        anchors.bottom: root.bottom
        width: parent.width
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FF00" }
            GradientStop { position: 1.0; color: "#00803F" }
        }
    }
    // <<M1

    // M2>>
    Image {
        id: ball
        x: 0; y: root.height-height
        source: "assets/soccer_ball.png"

        MouseArea {
            anchors.fill: parent 
            //点击后初始化
            onClicked: {
                ball.x = 0;
                ball.y = root.height-ball.height;
                ball.rotation = 0;
                anim.restart()
            }
        }
    }
    // <<M2

    // M3>> 
    //平行动画
    ParallelAnimation {
        id: anim 
        //插入连续动画
        SequentialAnimation { 
            //Y方向上升
            NumberAnimation {
                target: ball
                properties: "y"
                to: 20
                duration: root.duration * 0.4 
                //设置缓冲曲线风格
                easing.type: Easing.OutCirc
            } 
            //Y方向下降
            NumberAnimation {
                target: ball
                properties: "y"
                to: root.height-ball.height
                duration: root.duration * 0.6
                easing.type: Easing.OutBounce
            }
        } 
        //X方向移动
        NumberAnimation {
            target: ball
            properties: "x"
            to: root.width-ball.width
            duration: root.duration
        } 
        //角度旋转
        RotationAnimation {
            target: ball
            properties: "rotation"
            to: 720
            duration: root.duration
        }
    }
    // <<M3


}

运行轨迹:
这里写图片描述

查看评论

Qt:在QML中使用Animator,让动画无卡顿

之前有说如果使用Qt的PropertyAnimation做Material曲线动画。 传送门:```http://blog.csdn.net/wsj18808050/article/details/...
  • wsj18808050
  • wsj18808050
  • 2017-08-31 11:22:24
  • 1102

QML官方系列教程——Qt QML

附网址:http://qt-project.org/doc/qt-5/qtqml-index.html Qt QML Qt QML模块为基于QML language开发应用程序和库提供了语言和基础...
  • u011348999
  • u011348999
  • 2014-06-04 16:59:32
  • 10409

Unity进阶 - 动画系统 - Animations选项卡

Unity进阶 - 动画系统 - Animations选项卡
  • ios_song
  • ios_song
  • 2016-09-14 15:00:20
  • 3416

Unity3D游戏开发之设置动画(Animations)属性

Unity3D游戏开发之设置动画(Animations)属性   通过创建角色动画Avatar,在新的动画系统Mecanim中,Unity就设置了角色动画的骨架和蒙皮信息,从而就可以在Unity中实现...
  • book_longssl
  • book_longssl
  • 2015-02-07 08:58:59
  • 2227

Angular2 之 Animations

Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。 animations...
  • u010130282
  • u010130282
  • 2017-01-20 18:34:39
  • 5936

Qt5官方demo解析集26——Extending QML - Grouped Properties Example

本系列所有文章可以在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 接上文Qt5官方demo解析集25——Extendin...
  • u011348999
  • u011348999
  • 2014-07-07 11:26:28
  • 2008

Simulator slow-motion animations are now on(iOS模拟器动画变慢的原因)

1、在做项目的时候经常发现IOS模拟器遇到慢动作,比如弹出一个UIAlertView,push到一个viewController,这个过程显示的非常慢,而且Xcode控制台打印这样一句话: ...
  • huadong2593
  • huadong2593
  • 2014-08-05 13:47:22
  • 2584

Qt 3D教程(四)结合Qt Quick来实现动画的效果

上篇教程已经给大家带来较为实用的效果了,这回我们尝试载入两个模型,并且让PhongMaterial成为它们的共享材质,此外,我们通过借助QtQuick的动画框架来让我们的三维场景动起来!...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2015-07-29 18:36:00
  • 5489

QML动画使用总结

QML使用动画元素改变对象的属性值,并通过插值使属性的改变平滑过渡。Rectangle{ id: box width: 100; height: 100 color: "blue" ...
  • king523103
  • king523103
  • 2016-03-09 18:07:02
  • 1026

angular2系统学习 - 动画

1.理解ng2的动画angular2的动画实际上是先定义若干个状态(一般就俩状态),然后元素在这若干个状态中变换。所以要记住俩东西 1. 状态 2. 状态之间的变换2.使用ng2动画1.首先要引入...
  • qq451354
  • qq451354
  • 2017-02-17 09:49:25
  • 2936
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 3037
    积分: 750
    排名: 6万+
    博客专栏
    文章存档
    最新评论