本篇内容主要讲解“怎么使用QML属性实现足球运动”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用QML属性实现足球运动”吧!
1. 所有动画的基类Animation
Animation动画类型不能直接在QML文件中使用。它的存在是为了提供一组通用的属性和方法，可用于继承自它的所有其他动画类型。直接使用Animation类型会导致错误，类似C++的抽象类。
1.1 Animation类型的常用属性
-
loops:int 设置当前动画循环的次数
-
paused:bool 表示当前动画是否暂停，可读可写，功能与stop()pause()类似
-
running:bool 标识当前动画是否正在运行
2. Animation动画类型的常用子类
下述列出的动画均是Animation的子类
2.1 锚定转场动画AnchorAnimation
AnchorAnimation:一般用于在锚定布局发生变化时候的转场动画，当在转换中使用锚定动画时，它将对状态更改期间发生的任何锚定更改进行动画处理。这可以通过使用AnchorChanges设置特定的目标项来覆盖。目标属性。
注意:AnchorAnimation只能在Transition中使用，并与AnchorChange一起使用。它不能用于行为和其他类型的动画
2.2 并列式动画ParallelAnimation
定义在并列式动画对象内的几组动画在播放时没有先后顺序，都会同时播放，并列式动画同时也支持内嵌序列式动画组和单个动画
2.3 序列式动画SequentialAnimation
与并列式相反，定义在序列式动画内的动画会按照动画创建的先后顺序依次执行，与并列式动画都可以理解为是单个动画的容器类动画。
2.4 属性动画PropertyAnimatio
和对象属性相关的动画，可以定义属性的值按照某种已知曲线从
from到to的转换，PropertyAnimation被NumberAnimation，RotationAnimation和ColorAnimation所继承
2.5 路径动画PathAnimation
定义和路径相关的动画，与Path和Transaction共同使用，定义路径动画
3. 关于动画的重要属性
3.1 easing动画缓冲曲线
一般地，在动画运行时，运行规律不都是线性的，有时候需要让动画按某种曲线斜率变化着运行，这时就需要指定动画的easing属性，Qt内置许多动画曲线，保证动画运行的多样性
3.2 target动画运行的目标对象
在PropertyAnimation中，往往需要运行动画的目标对象，表示属性值的改变是该目标对象的属性值
3.3 property属性指定
一般地，目标对象的属性不止一个，在指定属性动画时，需要明确动画改变哪个属性，就是用property,也可一次指定多个属性，使用properties指定
3.4 duration单次动画运行时长
指定当前动画从开始到结束运行的时间，单位ms，对于特殊的动画，有时还需要指定动画的振幅，周期，超调信息等等
3.5 from属性
标志当前动画的初始值
3.6 to属性
标志当前动画的结束值
4 经典案例：使用动画描绘足球运动轨迹
基本代码如下
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
id:root
visible: true
width: 1500
height: 300
title: qsTr("Window Test")
flags: Qt.FramelessWindowHint
y:1200
//准备地面和天空
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
color:"#00802F"
// gradient: Gradient {
// GradientStop { position: 0.0; color: "#00FF00" }
// GradientStop { position: 1.0; color: "#00802F" }
// }
}
//准备足球
Image {
id: ball
x: 20; y: 240
source: "qrc:/images/ball.png"
MouseArea {
anchors.fill: parent
onClicked: {
ball.x = 20; ball.y = 240
anim.restart()
}
}
}
//准备序列动画
ParallelAnimation {
id: anim
SequentialAnimation {
NumberAnimation {
target: ball
properties: "y"
to: 20
duration: 2000
easing.type: Easing.OutCirc
}
NumberAnimation {
target: ball
properties: "y"
to: 240
duration: 2000
easing.type: Easing.OutBounce
}
}
SequentialAnimation{
NumberAnimation {
target: ball
properties: "x"
to: 400
duration: 2000
easing.type: Easing.Linear
}
NumberAnimation {
target: ball
properties: "x"
to: 650
duration: 2000
easing.type: Easing.Linear
}
}
RotationAnimation {
target: ball
properties: "rotation"
to: 720
duration: 4000
easing.type: Easing.Linear
}
}
}
3.1 运行结果如下
到此，相信大家对“怎么使用QML属性实现足球运动”有了更深的了解，不妨来实际操作一番吧！这里是本站网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
