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;
        }
    }
}