QML知识笔记（五）

动画元素

PropertyAnimation元素

PropertyAnimation(属性动画元素)是用来为属性提供动画的最基本的动画元素。动画元素可以通过不同方式来使用，取决于所需要的应用场景。一般有以下几种

作为属性值的来源

可以立即为一个指定的属性使用动画

Rectangle{
    id: rect1
    width: 80
    height: 80
    color: "orange"
    radius: 10
    Text{
        anchors.centerIn: parent
        font.pointSize: 12
        text: "属性值源"
    }
    PropertyAnimation on x{
        from: 50                        //起点
        to: 500                         //终点
        duration: 30000                 //运动时间为30s
        loops: Animation.Infinite       //无限循环
        easing.type: Easing.OutBounce   //创建一个动画到达目标值时的反弹效果
    }
}

在信号处理器中创建

当接收到一个信号（如鼠标单机事件）时触发动画

Rectangle{
    id: rect2
    width: 80
    height: 80
    color: "lightgreen"
    radius: 10
    Text{
        anchors.centerIn: parent
        font.pointSize: 12
        text: "信号处理"
    }
    MouseArea{
        anchors.fill: parent
        onClicked: PropertyAnimation{
            target: rect2   //动画应用于标识rect2的矩形
            property: "y"   //y轴方向的动画
            from: 30        //起点
            to: 300         //终点
            duration: 3000  //3秒
            loops: 3        //运动周期
            easing.type: Easing.Linear//匀速线性运动
        }
    }
}

作为独立动画元素

像一个普通的QML对象一样被创建，不需要绑定到任何特定的对象和属性

Rectangle{
    id: rect3
    width: 80
    height: 80
    color: "aqua"
    radius: 10
    Text{
        anchors.centerIn: parent
        font.pointSize: 12
        text: "独立元素"
    }
    PropertyAnimation{
        id: animation       //独立动画标识符
        target: rect3
        properties: "x,y"   //同时在x,y轴上运动
        duration: 1000      //运动时间为1秒
        easing.type: Easing.InOutBack//运动到半程增加过冲，然后减少
    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            animation.from = 20       //起点
            animation.to = 200        //终点
            animation.running = true  //开启动画
        }
    }
}

在属性值改变的行为中创建

当一个属性值改变时触发动画，又叫做“行为动画”

Rectangle{
    id: rect4
    width: 80
    height: 80
    color: "lightblue"
    radius: 10
    Text{
        anchors.centerIn: parent
        font.pointSize: 12
        text: "改变行为"
    }
    Behavior on x{
        PropertyAnimation{
            duration: 1000              //运动时间1秒
            easing.type: easing.InOuart //加速运动
        }
    }
    Behavior on y{
        PropertyAnimation{
            duration: 1000              //运动时间1秒
            easing.type: easing.InOuart //加速运动
        }
    }
}

其他动画元素

ColorAnimation

允许设置颜色变化

ColorAnimation on color{
        from: "blue"
        to: "aqua"
        duration: 1000
        loops: Animation.Infinite
    }

RotationAnimation

允许设置图形旋转的方向

RotationAnimation on rotation{
        from: 0
        to: 360
        duration: 10000
        direction: RotationAnimation.Clockwise
        loops: Animation.Infinite
    }

NumberAnimation

专门用于应用于数值类型的值改变的属性动画元素

NumberAnimation on radius {
        from: 0
        to: 50
        duration: 10000
        loops: Animation.Infinite
    }

Animator元素

Animator是一类特殊的动画元素，能直接用于Qt Quick的场景图形系统，使得基于Animator元素的动画即使在UI界面线程阻塞的情况下仍然能通过场景图形系统的渲染线程来工作

Rectangle{
    width: 100
    height: 100
    color: "green"

    //产生使元素在水平方向移动的动画
    XAnimator on x{
        from: 10
        to: 100
        duration: 5000
        loops: Animator.Infinite
    }
    //产生使元素在垂直方向移动的动画
    YAnimator on y{
        from: 10
        to: 100
        duration: 5000
        loops: Animator.Infinite
    }
    //产生使元素尺寸缩放的动画
    ScaleAnimator on scale {
        from: 0.1
        to: 1
        duration: 5000
        loops: Animator.Infinite
    }
    //产生使图形旋转的动画
    RotationAnimator on rotation{
        from: 0
        to: 360
        duration: 5000
        loops: Animator.Infinite
    }
    //产生图形隐形效果
    OpacityAnimator on opacity{
        from: 0
        to: 1
        duration: 5000
        loops: Animator.Infinite
    }
}

动画流UI界面

所谓”流UI界面“指的是其上UI组件能以动画的形态做连续变化，而不是突然显示、隐藏或跳出来。

状态和切换

Text{
    id: stext
    color: "gray"
    font.family: "Helvetica"
    font.pointSize: 20
    font.bold: true
    MouseArea{
        id: marea
        anchors.fill: parent
    }
    states: [   //包含该元素所有状态的列表
        State { //创建状态就得添加一个State对象
            name: "highlight"   //要改变一个元素的当前状态，可以将state属性设置为要改变到的状态的名称
            when: marea.pressed //触发条件
            PropertyChanges {
                target: stext
                color: "red"
                font.pointSize: 40
                style: Text.Raised  //以艺术字呈现
                styleColor: "red"
            }
        }
    ]
    transitions: [  //元素在不同状态间改变时使用切换来实现动画效果
        Transition {//创建一个切换得定义一个Transition对象
            PropertyAnimation{
                duration: 1000
            }
        }
    ]
}

设计组合动画

多个单一动画可组合成一个复合动画，这可以使用ParallelAnimation或SequentialAnimation动画组元素来实现。在ParallelAnimation中的动画会同时（并行）运行，在SequentialAnimation中的动画会一个接一个（串行）地运行。
一旦独立的动画被放入ParallelAnimation或SequentialAnimation中，它们就不能再独立开启或停止，串行和并行动画都必须作为一个组进行开启或停止。

Rectangle{
    id: rect
    width: 300
    height: 300
    color: "grey"

    SequentialAnimation on x{
        id: rectAnim
        running: false      //初始时关闭动画
        loops: Animation.Infinite
        NumberAnimation{
            from: 0
            to: 500
            duration: 8000
            easing.type: Easing.InOutQuad
        }
        NumberAnimation{
            from: 500
            to: 0
            duration: 8000
            easing.type: Easing.InOutQuad
        }
        PauseAnimation{
            duration: 1000
        }
    }

    //图片
    Image {
        anchors.fill: parent
        id: img
        //source: "/new/prefix1/photo.png"
        source: "qrc:/new/prefix1/photo.png"
        anchors.horizontalCenter: parent.horizontalCenter//照片沿垂直中线下落
        y: 0
        scale: 0.1
        opacity: 0
        rotation: 45
    }

    //嵌套动画
    SequentialAnimation{
        id: imgAnim
        loops: Animation.Infinite
        ParallelAnimation{
            ScaleAnimator{
                target: img
                to: 1
                duration: 1500
            }
            OpacityAnimator{
                target: img
                to: 1
                duration: 2000
            }
            RotationAnimator{
                target: img
                to: 360
                duration: 2000
            }
            NumberAnimation{
                target: img
                property: "y"
                to: rect.height - img.height
                easing.type: Easing.OutBounce
                duration: 5000
            }
        }
        //暂停
        PauseAnimation {
            duration: 2000
        }
        //回到初始状态
        ParallelAnimation{
            NumberAnimation{
                target: img
                property: "y"
                to: 0
                easing.type: Easing.OutQuad
                duration: 1000
            }
            OpacityAnimator{
                target: img
                to: 0
                duration: 1000
            }
        }
    }

    MouseArea{
        anchors.fill: parent
        onClicked: {
            rectAnim.running = true
            imgAnim.running = true
        }
    }
}

图像特效

import QtQuick
import Qt5Compat.GraphicalEffects   //导入特效元素库
Rectangle{
    width: animg.width
    height: animg.height

    //可以用来播放一系列帧的动画，如GIF文件
    AnimatedImage{
        id: animg
        source: "/new/prefix1/photo.png"
    }

    //特效元素，设置源元素的亮度和对比度
    BrightnessContrast{
        id: bright
        anchors.fill: parent
        source: animg
    }

    SequentialAnimation{
        id: imgAnim
        //亮度
        NumberAnimation{
            target: bright
            property: "brightness"
            to: 0.25
            duration: 1500
        }
        //对比度
        NumberAnimation{
            target: bright
            property: "contrast"
            to: 1
            duration: 1500
        }
    }

    //旋转
    transform: Rotation{
        //初始位置
        origin.x: animg.width/2
        origin.y: animg.height/2
        axis{
            x: 0
            y: 1    //沿y轴旋转
            z: 0
        }
        NumberAnimation on angle{
            from: 0
            to: 360
            duration: 10000
            loops: Animation.Infinite
        }
    }

    MouseArea{
        anchors.fill: parent
        onClicked: {
            imgAnim.running = true  //单机开启动画，改变亮度和对比度
        }
    }
}