怎么使用QML属性实现足球运动

本篇内容主要讲解“怎么使用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属性实现足球运动”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！