189 8069 5689

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

本篇内容主要讲解“怎么使用QML属性实现足球运动”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用QML属性实现足球运动”吧!

创新互联2013年开创至今,先为葫芦岛等服务建站,葫芦岛等地企业,进行企业商务咨询服务。为葫芦岛企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

和对象属性相关的动画,可以定义属性的值按照某种已知曲线从fromto的转换,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属性实现足球运动

到此,相信大家对“怎么使用QML属性实现足球运动”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


分享名称:怎么使用QML属性实现足球运动
转载来源:http://cdxtjz.cn/article/ppsioe.html

其他资讯