QML元素 动画

动画Animation可是一个QML元素中特别重要的东西.而且家族也特别庞大,下面我们来一一介绍

首先是动画之祖 Animation

属性:type含义
alwaysRuntoEnd:bool总是能够完成当前迭代,不受中途stop,running控制
loops:int动画循环多少次
paused:bool当前动画是否停止了
running:bool当前动画是否运行

//动画之祖拥有 stared()和stopped()信号

接下来是从Animation继承下来的一套了

首当其冲的是入门必学的一套 PropertyAnimation

属性:type含义
duration:int以毫秒为单位,表示动画一个周期的执行时间
easing复合属性,用于表示动画执行缓冲曲线行为,拥有以下属性
1.easing.type 缓冲类型
2.easing.amplitude 振幅
3.easing.overshoot 预订点4.easing.period 时期 5.easing.bezierCurve 贝塞尔曲线
exclude:list保存不执行该动画的对象列表
from:variant动画的起始属性值
to:variant动画的终点属性值
properties:string
property:string
决定哪些属性执行该动画
targets:Object
targets:list
决定哪些对象执行该动画

这下我们知道了如何执行动画.PropertyAnimation其实已经表明了大多数动画的表现方式,但是对于一个完整的界面,我们还需要表示动画的运行方式,是串行还是并行,接下来介绍这两种动画

ParallelAnimation 平行动画
SequentiialAnimation 串行动画
用来表示这两种动画

Demo

import QtQuick 2.7

Rectangle {
    id:root;
    width:700;
    height:600;
    Image {
        id:ball;
        asynchronous:true;
        source:"./images/ball.png";
        x:20;
        y:400;
        ParallelAnimation {
            id:animation;
            SequentialAnimation {
                NumberAnimation {
                    target:ball;
                    property:"y";
                    from:400;
                    to:50;
                    duration:5000 * 0.4;
                }
                NumberAnimation {
                    target:ball;
                    property:"y";
                    from:50;
                    to:400;
                    duration:5000 * 0.6;
                }
            }
            ParallelAnimation {
                NumberAnimation {
                    target:ball;
                    property:"x";
                    from:20;
                    to:400;
                    duration:5000;
                }
                NumberAnimation {
                    target:ball;
                    property:"rotation";
                    from:0;
                    to:1080;
                    duration:5000;
                }
            }
        }
        MouseArea {
            id:ballarea;
            onClicked:function () {
                ball.x = 20;
                ball.y = 400;
                ball.rotation = 0;
                animation.running = true;

            }
            anchors.fill:ball;
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值