4.QML动画——概念、动画应用方式和动画的缓动曲线

最新推荐文章于 2024-07-30 11:33:12 发布

Master Cui

最新推荐文章于 2024-07-30 11:33:12 发布

阅读量926

点赞数

分类专栏： Qml 文章标签： qml qt

本文链接：https://blog.csdn.net/Master_Cui/article/details/109641841

版权

Qml 专栏收录该内容

14 篇文章 10 订阅

订阅专栏

一、动画

动画将应用于属性更改。动画通过对属性值定义插值曲线，控制属性值从一个值到另一个值平滑过渡。 Qt Quick中的所有动画均由同一计时器控制，因此动画是同步的。这样可以提高动画的性能和视质量。

注意：动画控制属性的变化方式是通过对属性值进行插值操作实现的。 QML的每个元素都提供数十个属性，每个属性都可以通过动画控制。

示例1

Image {
    id: root
    source: "./background.png"

    property bool running: false
    property int duration: 4000
    property int padding: 40

    Image {
        id: box
        source: "./box_green.png"
        x:padding
        y:root.height/2-height/2

        NumberAnimation on x {//x属性的数值动画
            to:root.width-box.width-root.padding//x要到达的像素位置
            duration: root.duration
            running: root.running
        }

        RotationAnimation on rotation {//旋转属性的动画
            to:360//旋转360度
            duration: root.duration
            running: root.running
        }
        antialiasing: true//抗锯齿
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.running=true;
        }
    }
}

效果如下

示例用x和rotation属性做了个简单的动画。动画的持续时间为4000毫秒。 x上的动画将x坐标逐渐移至240像素。旋转动画从当前角度到360度。 x和rotation两种属性同时变化。

当数值变化时，NumberAnimation应用的动画也会跟随数值进行变化。可以通过多种方式应用NumberAnimation，包括过渡，行为和属性值源。NumberAnimation继承于PropertyAnimation，PropertyAnimation中的duration（动画的持续时间），from（动画元素的起点），to（动画元素的终点），property（动画跟随变化的属性），properties（动画跟随变化的多个属性），targets（动画作用的元素多个目标），target（动画作用的元素目标）等属性均被NumberAnimation继承，可直接在NumberAnimation中使用

PropertyAnimation的单数和复数的属性设置如下

NumberAnimation { targets: theItem; properties: "x"; to: 500 }
NumberAnimation { targets: [itemA, itemB]; properties: "x"; to: 500 }
NumberAnimation { properties: "x,y" }

其中，targets属性可以设置一个属性，也可以设置多个，property和properties也是类似的

RotationAnimation可以控制动画期间的item的旋转方向。默认情况下，它沿数值变化的方向旋转；从0到240的旋转将顺时针旋转240度，而从240到0的旋转将逆时针旋转240度。可以设置direction属性以指定旋转方向。RotationAnimation也是继承于PropertyAnimation，也可以直接使用PropertyAnimation中的属性

running属性保存动画当前是否正在运行，可以设置running属性为控制动画是否运行

二、动画的几种使用方式

1.作用于某个属性的动画-qml元素加载完后动画运行

2.作用于某个属性的行为-属性值更改时动画运行

3.独立动画-在使用start()明确启动动画或将running设置为true时运行

示例

先定义一个可点击图片组件

import QtQuick 2.0

Item {
    id:root
    width: container.childrenRect.width;
    height: container.childrenRect.height;
    property alias text: label.text//暴露给外部的属性
    property alias source: img.source
    signal clicked

    Column {
        id:container
        Image {
            id: img
        }
        Text {
            id: label
            width: img.width
            color: "pink"
            wrapMode: Text.WordWrap
            horizontalAlignment: Text.horizontalAlignment
        }
    }

    MouseArea {
        anchors.fill:parent
        onClicked: {
            root.clicked()
        }
    }
}

上述代码中的childrenRect.width和childrenRect.height表示的是Column中的image和text组合之后的总体宽度和高度

Item {
    id: root
    Image {
        id: bg
        source: "./background_medium.png"
    }
    width:bg.width
    height: bg.height

    MouseArea {
        anchors.fill: parent
        onClicked: {
            red.y=blue.y=green.y=200
        }
    }

    Clickableimg {
        id:green
        x:40
        y:root.height-height
        source: "./box_green.png"
        text: "numanimation test"
        NumberAnimation on y{
            to:40;
            duration: 4000
        }
    }

    Clickableimg {
        id:blue
        x:green.x+green.width+50
        y:root.height-height
        source: "./box_blue.png"
        text: "behavior test"
        Behavior on y {
            NumberAnimation {
                duration: 4000
            }
        }
        onClicked: {
            y=40
        }
    }

    Clickableimg {
        id:red
        x:blue.x+blue.width+50
        y:root.height-height
        source: "./box_red.png"
        text: "standalone animation"

        NumberAnimation {
            id:anim
            target: red
            properties: "y"
            duration: 4000
            to:40
        }

        onClicked: {
            anim.start()
        }
    }
}

效果如下