QML 动态元素(动画)

最新推荐文章于 2023-06-08 19:42:28 发布

黑塞123

最新推荐文章于 2023-06-08 19:42:28 发布

阅读量387

点赞数 1

分类专栏： QML 文章标签： qml QML

本文链接：https://blog.csdn.net/sinat_14854721/article/details/108635103

版权

QML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

介绍

动画被用于属性的改变。一个动画定义了属性值改变的曲线，将一个属性  
值变化从一个值过渡到另一个值。其中值包括（x, y 坐标， 颜色，旋转  
角度等）。动画是由一连串的目标属性活动定义的，平缓的曲线算法能够
引发一个定义时间内属性的持续变化。所有在QtQuick中的动画都由同一
个计时器来控制，因此它们始终都保持同步，这也提高了动画的性能和显
示效果

常用类型

有几种类型的动画，每一种都在特定情况下都有最佳的效果，
下面列出了一些常用的动画：

PropertyAnimation（属性动画）- 使用属性值改变播放的动画
NumberAnimation（数字动画）- 使用数字改变播放的动画
ColorAnimation（颜色动画）- 使用颜色改变播放的动画
RotationAnimation（旋转动画）- 使用旋转改变播放的动画

应用动画（Applying Animations）

动画可以通过以下几种方式来应用：

属性动画 - 在元素完整加载后自动运行
属性动作 - 当属性值改变时自动运行
独立运行动画 - 使用start()函数明确指定运行或者running属性被设置为true（比如通过属性绑定）

应用代码

1：属性动画 - 在元素完整加载后自动运行

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 1040
    height: 600
    title: qsTr("Hello World")
    Rectangle{
        id:reg
        width: 100
        height: 100
        x: 0
        y: 0
        color: "red"
    }
     PropertyAnimation  on x {to: 500;/*property: "x"; */duration: 1000; loops: Animation.Infinite}
}
还有一中写法： 当然这也就是第三种方法
 PropertyAnimation  /*on x*/ {to: 500;property: "x"; target: reg;duration: 1000; loops: Animation.Infinite;running: true }

3：独立运行动画 - 使用start()函数明确指定运行或者running属性被设置为true（比如通过属性绑定）

mport QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 1040
    height: 600
    title: qsTr("Hello World")
    Rectangle{
        id:reg
        width: 100
        height: 100
        x: 0
        y: 0
        color: "red"
        MouseArea{
        anchors.fill: parent
        onClicked: animationX.start()
        //onClicked: animationX.running = true
        }
    }
    NumberAnimation   {id: animationX;target: reg; property: "y";from: 10; to: 440;duration: 2000; }