QML系列教程(5)-属性动画的3种写法

属性值动画PropertyAnimation，一个最经典的例子是数值动画 NumberAnimation，

方法1：

语法：

NumberAnimation on [属性名]  {
    动画属性1： 值1
    动画属性2： 值2
。。。。
}   
 

例子：

NumberAnimation on rotation {
                id: minutePinAni; 
                from: 0; to: 360; 
                duration: 20000; loops: Animation.Infinite 
            }

要给哪个元素设置动画，就要把NumberAnimation写在哪个元素里面。也即，这种写法，只能作用于父元素的某个属性。

这种写法，在QML文件加载完成后，会立即自动播放。

 

方法2：

语法：

NumberAnimation  {
    id: 该动画的id
    target: 要施加动画的元素id
    property: "要施加动画的属性名"
    动画属性4： 值4
    动画属性5： 值5
。。。。
}

例子：
 

        NumberAnimation{
            id: minutePinAni
            target: minPin    //动画要作用于id=minPin的那个元素
            property: "rotation" //动画作用于rotation属性
            to: 360;
            duration: 10000;
            loops: Animation.Infinite
        }

这种写法，可以把 NumberAnimation 代码段写到任意位置，不必写在父元素里面。不过，这种动画必须显式地调用start()函数才能开始执行。
例如在一个按钮的槽中，执行： minutePinAni.start()

 

方法3：

语法：
Behavior on 属性名 {
    NumberAnimation {动画参数}
    //RotationAnimation {动画参数}
。。。。或者，任意其他类型的动画
}
例子：

Behavior on rotation {
    NumberAnimation {from: 0; to: 100; duration: 20000; loops: Animation.Infinite}
}

Behavior on rotation {
    NumberAnimation {duration: 20000}  //更常用
}

这种语法也是只能作用于父控件的某个属性。动画的启动时机是：当指定的属性值发生变化时。
例如，在某个按钮槽里修改了这个属性的值，那么动画会按照所设置的duration时间，把这个属性均匀地过渡到所设定的值。

例如，每点一下按钮，就旋转30度，示例代码：

import QtQuick 2.7

Item {
    id: root
    width: 200;
    Image{ //表盘
        ...//绘制表盘，见前面博文
        ...//绘制时针，见前面博文

        Image{ //分针
            id: minPin
            ...//绘制分针，见前面博文

            Behavior on rotation { //设置行为动画
                NumberAnimation {duration: 500}
            }
        }

        MyButton
        {
            id: myBtn
            text: "加30"
            anchors.top: dial.bottom
            anchors.left: parent.left
            onClicked: minPin.rotation += 30; //点一次按钮，角度+30
        }
    }
}

 

 

 

写在最后，上面的例子中，我们使用了 NumberAnimation 来实现一个图片的旋转动画， 有朋友会注意到，QML其实提供了专用的旋转动画类：RotationAnimation。其实这两个类都继承自PropertyAnimation， 功能是非常类似的。

旋转动画RotationAnimation，比NumberAnimation多了一个 旋转方向 的属性 ：direction， 这个属性名字叫旋转方向，其实本质上代表了让属性值增大还是减小。

例如，某个属性的当前值为100，目标值为200，

• 如果使用NumberAnimation，那么这个值会100、101、102、103.....200。
• 如果使用RotationAnimation， 并设置direction为顺时针，那么其表现与NumberAnimation完全一致；如果设置为逆时针，那么该属性值会100、99、98、97.....0（360）、359、358.....200