【qml学习笔记】4 Animation 动画

xia0414

已于 2024-04-19 17:47:51 修改

阅读量522

点赞数 17

分类专栏： qml学习笔记文章标签：学习笔记 nginx qt c++

于 2024-04-19 17:46:08 首次发布

本文链接：https://blog.csdn.net/xia0414/article/details/137972915

版权

qml学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了在QtQML中使用的不同动画类型（如属性动画、数字动画等），动画的触发方式，如自动运行、属性动作和独立运行，以及动画曲线的设置。此外，还涵盖了分组动画（SequentialAnimation和ParallelAnimation）、嵌套动画和状态过渡动画的概念和用法。

摘要由CSDN通过智能技术生成

动画

有⼏种类型的动画，每⼀种都在特定情况下都有最佳的效果，下⾯列出了⼀些常⽤的动画：

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

Rectangle {
        id:rect1
        anchors.fill: parent;
        color:"gray"
        property bool running:false
        Rectangle {
            id:rect2
            color:"red"
            x: 40; y: 80
            width: 20 ;height:40
            NumberAnimation on x {
                to: rect1.width-40
                duration: 400
                running: rect1.running //根据属性决定动画播放
            }
            RotationAnimation on rotation {
                from:0
                to: 90
                duration: 400
                loops: Animation.Infinite //from to 才有效 只有to就不会循环
            }
            }
        MouseArea{
            anchors.fill:parent
            onClicked: parent.running = true
        }
   }

在这里插入图片描述

动画触发

动画可以通过以下⼏种⽅式来应⽤：

属性动画 - 在元素完整加载后⾃动运⾏
属性动作 - 当属性值改变时⾃动运⾏
独⽴运⾏动画 - 使⽤start()函数明确指定运⾏或者running属性被设置为

 Rectangle {
        id:rect1
        anchors.fill: parent;
        color:"gray"
        property bool running:true
        Rectangle {
            id:rect2
            color:"red"
            x: 40; y: 80
            width: 20 ;height:40
            NumberAnimation on x { //属性动画
                to: rect1.width-40
                duration: 400
                running: rect1.running
                }
            }
        Rectangle {
            id:rect3
            anchors.top: rect2.bottom;anchors.topMargin:10;
            color:"yellow"
            x: 40; y: 80
            width: 20 ;height:40
            Behavior on x {NumberAnimation{duration: 400}//属性动作
            }
            }
        Rectangle {
            id:rect4
            anchors.top: rect3.bottom;anchors.topMargin:10;
            color:"blue"
            x: 40; y: 80
            width: 20 ;height:40

            NumberAnimation{ //独⽴运⾏动画（注意不要写on x 否则和属性动画一样会执行一遍
                property: "x"
                target: rect4
                id:anim1
                from:40
                to: rect1.width-40
                duration: 4000
                }
            }

        MouseArea{
            anchors.fill:parent
            onClicked: {anim1.restart();rect3.x=400}

        }

在这里插入图片描述

动画曲线

通过设置 easing.type属性即可如 easing.type:Easing.InQuad

在这里插入图片描述

 Rectangle {
        id:rect1
        anchors.fill: parent;
        color:"gray"
        property bool running:true
        Rectangle {
            id:rect2
            color:"red"
            x: 40; y: 80
            width: 20 ;height:40
            NumberAnimation {
                easing.type:Easing.InQuad//设置为指数型
                id:anim1;
                property: "x"
                target: rect2
                from:40
                to: rect1.width-40
                duration: 1000
                }
            }
        Rectangle {
            id:rect3
            color:"red"
            x: 40; y: 160
            width: 20 ;height:40
            NumberAnimation {
                easing.type:Easing.Linear//设置为线性
                id:anim2;
                property: "x"
                target: rect3
                from:40
                to: rect1.width-40
                duration: 1000
                }
            }
        MouseArea{
            anchors.fill:parent
            onClicked: {
                anim1.restart()
                anim2.restart()
            }

        }
}

在这里插入图片描述

除了duration属性与easing.type属性，你也可以对动画进⾏微调。例如 PropertyAnimation属性，⼤多数动画都⽀持附加的easing.amplitude（缓冲振幅），easing.overshoot（缓冲溢出），easing.period（缓冲周期），这些属性允许你对个别的缓冲曲线进⾏微调。不是所有的缓冲曲线都⽀持这些参数。可以查看Qt **PropertyAnimation**⽂档中的缓冲列表（easing table）来查看⼀个缓冲曲线的相关参数。

分组动画

你可以使⽤SequentialAnimation（连续动画）和 ParallelAnimation（平⾏动画）来实现它们，它们作为动画的容器来包含其它的动画元素。

Rectangle {
        id:root
        anchors.fill: parent;
        color:"gray"
        Rectangle{
        id:rect1
        x:40;y:40
        width:40;height: 20
        color: "red"
        //ParallelAnimation
        SequentialAnimation{
            id:anim
            NumberAnimation{
                target: rect1
                properties: "y"
                to:root.height-40
            }
            NumberAnimation{
                target: rect1
                properties: "x"
                to:root.width-40
            }
        }
        }
        MouseArea{
            anchors.fill:parent
            onClicked: {
                anim.restart()
            }

        }
}

嵌套动画

ParallelAnimation
        {
           id: anim1
            SequentialAnimation{
                id:anim
                NumberAnimation{
                    target: rect1
                    properties: "y"
                    to:root.height-40
                }
                NumberAnimation{
                    target: rect1
                    properties: "x"
                    to:root.width-40
                }
            }
            RotationAnimation{
                target: rect1
                properties: "rotation"
                from:0
                to:360
                loops: Animation.Infinite
            }
        }

在这里插入图片描述

状态过渡动画

状态

在QML中，使⽤State元素来定义状态，需要与基础元素对象（Item）的 states序列属性连接。状态通过它的状态名来鉴别，由组成它的⼀系列简单的属性来改变元素。默认的状态在初始化元素属性时定义，并命名为“”（⼀个空的字符串）。

Item {
    id: root
    states: [
        State {
            name: "go"
            PropertyChanges { ... }
        },
        State {
            name: "stop"
            PropertyChanges { ... }
        }
    ]
}

过渡

⼀系列的过渡能够被加⼊任何元素，⼀个过渡由状态的改变触发执⾏。你可以使⽤属性的from:和to:来定义状态改变的指定过渡。这两个属性就像⼀个过滤器，当过滤器为true时，过渡⽣效。你也可以使⽤“”来表⽰任何状态。例如 from:“”; to:"*"表⽰从任⼀状态到另⼀个任⼀状态的默认值，这意味着过渡⽤于每个状态的切换。

Rectangle
    {
        id:rect1
        color: "gray"
        width: 120;height: 250
        anchors.centerIn: parent
        state:"stop"
        states: [
            State {
                name: "stop"
                PropertyChanges {target:light1;color:"red"}
                PropertyChanges {target:light2;color:"black"}
            },
            State {
                name: "go"
                PropertyChanges {target:light1;color:"black"}
                PropertyChanges {target:light2;color:"green"}
            }
        ]

        transitions: [
            Transition {
            from: "*"; to: "*"
                ColorAnimation { target: light1; properties: "color"; duration: 2000 }
                ColorAnimation { target: light2; properties: "color"; duration: 2000 }
        }
        ]


        Rectangle {
            id: light1
            x: 10; y: 15
            width: 100; height: width
            radius: width/2
            color: "black"
        }
        Rectangle {
            id: light2
            x: 10; y: 135
            width: 100; height: width
            radius: width/2
            color: "black"
        }

        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                if(parent.state=="stop")
                {
                    parent.state = "go"
                }
                else
                {
                    parent.state = "stop"
                }
            }

    }
}

在这里插入图片描述

xia0414

关注

17
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
【qml学习笔记】4 Animation 动画

例如 PropertyAnimation属性，⼤多数动画都⽀持附加的easing.amplitude（缓冲振幅），easing.overshoot（缓冲溢出），easing.period（缓冲周期），这些属性允许你对个别的缓冲曲线进⾏微调。你也可以使⽤“”来表⽰任何状态。to:"*"表⽰从任⼀状态到另⼀个任⼀状态的默认值，这意味着过渡⽤于每个状态的切换。状态通过它的状态名来鉴别，由组成它的⼀系列简单的属性来改变元素。（平⾏动画）来实现它们，它们作为动画的容器来包含其它的动画元素。
复制链接

扫一扫

专栏目录