Qt quick基础3（基础动画）

前言

上一个教程我们已经讲述了基本元素Text Image Rectangle的使用，并且其中也涉及了Mousearea鼠标区域，以及旋转平移放缩等基础元素的使用，本节我们介绍简单的动画。

我们可以先来打开Qt assistant来看看Qt中如何介绍这个元素

Animation元素主要有以下的使用方法：

• PropertyAnimation 元素值改变时的动画
• NumberAnimation qreal类型值的变化时的动画
• ColorAnimation 颜色值的变化时的动画
• RotationAnimation 旋转值变化时的动画
• Animation on property 元素加载后自动运行的动画
• Behavior on property 当元素值改变后运行动画
• Standalone Animation 单独动画，使用start()运行

前期准备工作

为了体现动画效果，修改之前的可点击图片，使其具有可以添加文本的功能

//ClickableImageV2.qml
import QtQuick 2.15

Item {
    id: imagechange
    width: container.childrenRect.width
    height: container.childrenRect.height
    property alias text: label.text
    property alias source: image.source
   // property alias imagechange_height: imagechange.height
   // property alias imagechange_width: imagechange.width

    signal clicked

    Column{
        id:container
        Image{
            id:image
        }
        Text {
            id: label
            width: image.width
            horizontalAlignment: Text.AlignHCenter //水平对齐方式：居中对齐
            wrapMode: Text.WordWrap //自动换行
            color: "#0000FF"

        }

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

}

再将该qml添加到cmake中去，并在“main.qml”文件中引入import Components，类似于上一篇文章一样，这样在main文件中就可以调用ClickableImageV2元素了。

Animation on property 元素加载后自动运行动画

 ClickableImageV2{
        id: cat
        x:100;y:180
        source:"https://ts1.cn.mm.bing.net/th/id/R-C.c1ef7c28ec0c3a03671bf8c5b84824a9?rik=gtgH8z39ogolSA&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f230101%2f1_010120010R534.jpg&ehk=%2bP%2fA9Bc1Xw28uBxAFWEP0qGpscER%2bd8hq%2flkynX4qUw%3d&risl=&pid=ImgRaw&r=0" //网上随便找的图片
        text: "animation on property"
        NumberAnimation on y{
            to:40;duration:500 //沿y轴移动到40，持续时间500ms
        }
    }

效果最后再一起通过动图展示

Behavior on property 当元素值改变后运行动画

 ClickableImageV2{
        id: beauty
        x:300;y:180
        source:"https://ts1.cn.mm.bing.net/th/id/R-C.6ea41fdad2fdbe324a84b6b68969ae4d?rik=nsNtS0in5lEFjw&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f221229%2f1_12291Q03140R.jpg&ehk=Irzz7kT29gRfpRgrn7Z7KipUPsJuV6HR0yZGdyFD41M%3d&risl=&pid=ImgRaw&r=0"
        text: "behavior on property"

        Behavior on y{
            NumberAnimation{duration: 1000}
        }
        onClicked: y=40 //当点击时移动到y=40，持续时间1000ms
    }

效果最后再一起通过动图展示

Standalone Animation 单独动画

ClickableImageV2{
        id: girl
        x: 500; y:180
        source: "https://ts1.cn.mm.bing.net/th/id/R-C.12367521e2e0f47880028f006af212bf?rik=NLFH66WqxDZm6g&riu=http%3A%2F%2Fimg.touxiangwu.com%2Fuploads%2Fallimg%2F221201%2F1_1201092K92159.jpg&ehk=%2FljyxcnFggMfIvNo2bBTZgZwIRBphREqz8iEsamoh%2Bc%3D&risl=&pid=ImgRaw&r=0"
        onClicked: anim.start() //当按下时，动画启动
        text: "standalone animation" //图片下方文本
        NumberAnimation{
            id:anim
            target: girl
            properties: "y"
            to:40
            duration: 1000 //y移动到40，持续时间1000ms
        }
    }

动图展示：

)

从上面动图中可以看到，第一张图是自动加载运行的，第二三张图是通过点击后才进行动画的，但第二三张图其实原理有所差别，上面已经说过。

旋转动画

ClickableImageV2{
        id: cat1
        x:100;y:400
        source:"https://ts1.cn.mm.bing.net/th/id/R-C.c1ef7c28ec0c3a03671bf8c5b84824a9?rik=gtgH8z39ogolSA&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f230101%2f1_010120010R534.jpg&ehk=%2bP%2fA9Bc1Xw28uBxAFWEP0qGpscER%2bd8hq%2flkynX4qUw%3d&risl=&pid=ImgRaw&r=0"
        text: "animation on property Rotation"
        onClicked: anim1.start()

        RotationAnimation{ //旋转动画
            id:anim1
            target: cat1
            duration: 1000
            from: 0
            to: 360

        }
    }

当按下cat1这一个图片时，动画会顺时针旋转360°。此外还可以设置旋转方向，旋转次数等。

)

分组动画

分组动画可以使得动画变得稍稍复杂一些，首先我们可以使用串行或并行动画来实现更加复杂的动画。

“SequentialAnimation ” 串行动画，先执行一个动画，而后执行另一个动画，是串行的。

“ParallelAnimation” 并行动画，一起执行动画，并行。

通过两个简单的例子来实现他们。

串行动画

 ClickableImageV2{
        id:ufo1
        x:300;y:400
        text: "ufo1"
        source: "https://ts1.cn.mm.bing.net/th/id/R-C.0c5c6d17f438b2b6a7da0cf141142a9b?rik=qQt69%2bdLe49Xhw&riu=http%3a%2f%2fairplaneclipart.com%2fpics%2fufo_1.gif&ehk=IDlJeYj9dFd%2be7O7hbrgqpstvFU%2bw9l%2b2cBVZG0v3rg%3d&risl=&pid=ImgRaw&r=0" //网上随便找的图片
        onClicked: anim3.restart()
    }

    SequentialAnimation{ //串行动画，依次执行
        id:anim3
        NumberAnimation{
            target: ufo1
            properties: "y"
            to: 20
            duration: 500

        }

        NumberAnimation {
            target: ufo1
            property: "x"
            to:160
            duration: 500

        }
    }

串行动画效果和并行的动画效果一起展示。

并行动画

ClickableImageV2{
        id:ufo
        x:300;y:400
        text: "ufo"
        source: "https://ts1.cn.mm.bing.net/th/id/R-C.8e16054c47bb2c13bc5d18e36be59932?rik=2dsQzqI5vdDqVA&riu=http%3a%2f%2fwww.jbhua.com%2fuploads%2f170415%2f1-1F415195P3X5.jpg&ehk=lTK8qdpuevC5DoxuSOI9m0Q%2biXbR4lgfH82DlxudMpo%3d&risl=&pid=ImgRaw&r=0"
        onClicked: anim2.restart()
    }
    ParallelAnimation{ //并行动画，一起执行
        id:anim2
        NumberAnimation{
            target: ufo
            properties: "y"
            to: 20
            duration: 500

        }

        NumberAnimation {
            target: ufo
            property: "x"
            to:160
            duration: 500

        }
    }

代码描述了两个在同一起点的UFO图片，通过不同的动画效果来达到相同的终点位置，动画效果如下，还是基于之前写的可以点击的图片控件，ClickableImage.qml

)

串行并行嵌套

串行动画和并行动画都是可以嵌套的。下面我们再通过一个篮球弹跳的例子说明串行动画和并行动画的嵌套。

为了更加清晰明了，新建一个工程。

Rectangle{
        id:sky
        width: parent.width
        height: 300
        gradient: Gradient{ //渐变色
            GradientStop{position: 0.0;color:"#0080FF"}
            GradientStop{position:1.0; color:"#66CCFF"}
        }
    }
    Rectangle{
        id:ground
        anchors.top:sky.bottom

        width: parent.width
        height: 180
        gradient: Gradient{ //渐变色
            GradientStop{position: 0.0;color:"#00FF00"}
            GradientStop{position:1.0; color:"#00803F"}
        }
    }

两个渐变色的矩形框，组成了蓝天和草地的图形。

Image{
        id:basketball
        x:0;y:240
        source: "https://ppt.chnlib.com/FileUpload/2019-02/100Ge_Tou_Ming_Bei_J-151627_210.png"
        MouseArea{
            anchors.fill: parent
            onClicked: {
                basketball.x=0
                basketball.y=240
                basketball.rotation=0
                anim.restart()
            }
        }
    }

Image元素引入篮球这个图片，同时点按篮球图片会恢复到原位置。

 SequentialAnimation{
        id:anim
        NumberAnimation{
            target: basketball
            properties: "y"
            to: 20
            duration: 600

        }

        NumberAnimation {
            target: basketball
            property: "y"
            to:240
            duration: 900

        }
    }
    //串行动画，实现在y轴上的篮球弹跳

动画效果如下图所示

)

接下来再加上x轴的移动以及球的旋转，其中串行动画嵌套在并行动画之中。

    ParallelAnimation{ //并行动画
        id:anim
        SequentialAnimation{ //串行动画

            NumberAnimation{
                target: basketball
                properties: "y"
                to: 20
                duration: 600

            }

            NumberAnimation {
                target: basketball
                property: "y"
                to:240
                duration: 900

            }
        }

        NumberAnimation{
            target: basketball
            properties: "x"
            to: 400
            duration: 1800

        }
        RotationAnimation{
            target: basketball
            properties: "rotation"
            to:720
            //loops:Animation.Infinite
            duration: 1800
        }

    }

其中y轴上的动画是串行的，但他同时与x轴上和旋转的动画是并行的，注意动画的持续时间要匹配。

以下为最终动画效果：

小结

本文从基础动画出发，分别写了动画启动的不同方法，同时举了几个例子说明了旋转动画、串行动画、并行动画及其嵌套的例子，帮助学习基本的动画。

如果您觉得我写的不错，麻烦给我一个免费的赞！如果内容中有错误，也欢迎向我反馈。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 《现代JavaScript高级教程》requestAnimationFrame：优化动画和渲染的利器

点击在线阅读，体验更好 链接 现代JavaScript高级小册 链接 深入浅出Dart 链接 现代TypeScript高级小册 链接 requestAnimationFrame：优化动画和渲染的利器 引言 在Web开发中，实现平滑且高性能的动画和渲染是一个关键…