在QML中,其他的动画元素大多继承自PropertyAnimation,主要有NumberAnimation、CoIorAnimation、RotationAnimation和Vector3dAnimation等。其中,NumberAnimation为实数和整数等数值类属性提供了更高效的实现;Vector3dAnimation为矢量3D提供了更高效的支持;而ColorAnimation和RotationAnimation则分别为颜色和旋转动画提供了特定的支持。
下面实例编程演示其他各种动画元素的应用,运行效果如下图所示,其中虚线箭头标示出在程序运行中图形运动变化的轨迹。实现步骤如下。
(1) 新建项目
新建QML应用程序,项目名称为“OtherAnimations”。
(2) 自定义组件
右击项目视图“Resources”一“qml.qrc”下的“/”节点,选择“Add New...”项,新建“CircleRect.qmI”文件,编写代码如下:
import QtQuick 2.0
Rectangle {
width: 80
height: 80
ColorAnimation on color { // (a)
from: "blue"
to: "aqua"
duration: 10000
loops: Animation.Infinite
}
RotationAnimation on rotation { //(b)
from: 0
to: 360
duration: 10000
direction: RotationAnimation.Clockwise
loops: Animation.Infinite
}
NumberAnimation on radius { //(c)
from: 0
to: 40
duration: 10000
loops: Animation.Infinite
}
PropertyAnimation on x {
from: 50
to: 500
duration: 10000
loops: Animation.Infinite
easing.type : Easing.InOutQuad //先加速,后减速
}
}
其中,
- (a) ColorAnimation on color{...}: ColorAnimation动画元素允许颜色值设置from和to属性,这里设置from为blue, to为aqua,即矩形的颜色从蓝色逐渐变化为水绿色。
- (b) RotationAnimation on rotation{…}: RotationAnimation动画元素允许设定图形旋转的方向,本例通过指定from和to属性,使矩形旋转360°。设direction属性为RotationAnimation.Clockwise表示顺时针方向旋转;如果设为RotationAnimation.Counterclockwise,表示逆时针方向旋转。
- (c) NumberAnimation on radius:NumberAnimation动画元素是专门应用于数值类型的值改变的属性动画元素,本例用它来改变矩形的圆角半径值。因矩形长宽均为80,将圆角半径设为40可使矩形呈现为圆形,故radius属性值从0变化到40的动画效果是:矩形的四个棱角逐渐磨圆最终彻底成为一个圆形。
(3) 主程序
打开“main.qml”文件,编写代码如下:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
width: 640
height: 150
visible: true
title: qsTr("OtherAnimations")
Rectangle {
width: 360
height: 360
anchors.fill: parent
CircleRect { //使用组件
x: 50; y: 30
}
}
}
运行程序后可看到一个蓝色的矩形沿水平方向滚动,其棱角越来越圆,直至成为一个标准的圆形,同时颜色也在渐变中。
ColorAnimation、RotationAnimation、NumberAnimation等动画元素与PropertyAnimation一样,也都可被运用作为“属性值源”“信号处理”“独立元素”“改变行为”的动画。
————————————————
觉得有用的话请关注点赞,谢谢您的支持!
对于本系列文章相关示例完整代码有需要的朋友,可关注并在评论区留言!