QML开发——状态切换和设计组合动画流UI设计

动画流UI

ParallelAnimation和SequentialAnimation动画组元素

状态切换机制效果动图：

动画流UI

动画流UI就是能使动画的形态做连续的变化，而非突然显现、隐藏或跳出来，主要要两种方式：

状态切换机制
设计组合动画

ParallelAnimation和SequentialAnimation动画组元素

ParallelAnimation：动画会同时进行
SequentialAnimation：动画会一个个串行进行

状态切换机制效果动图：

StateText.qml

import QtQuick 2.0

Text{
    id: stext
    color: "red"   //设置字体初始颜色
    font.family: "Helevetica"   //设置字体
    font.pointSize: 30  //设置初始字号
    font.bold: true //设置加粗
    MouseArea{
        id: mArea
        anchors.fill: parent
    }
    states: [   //包含元素所有状态的列表
        State {
            name: "highlight"   //状态名称
            when: mArea.pressed //当鼠标按下时进图状态
            PropertyChanges {   //改变元素的属性值
                target: stext
                color: "blue"   //改变后字体颜色
                font.pointSize: 40  //改变后字号
                style:Text.Raised   //以艺术字的形式呈现
                styleColor: "red"
            }
        }
    ]
    transitions: [  //过渡;当需要设置动画切换的时候需要设置Transition对象来实现动画效果
        Transition{
            PropertyAnimation{
                duration: 3000
            }
        }

    ]
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("状态和切换动画流")
    Rectangle{
        x: 200
        y: 100
        MouseArea{
            id: mouseArea
            anchors.fill: parent
        }
        Row{
            anchors.centerIn: parent
            spacing: 30
            StateText{text: "武汉"}
            StateText{text: "加油"}
        }
    }

}

设计组合动画

CAnimate.qml

import QtQuick 2.7

Rectangle{  //水平往返移动的矩形背景区
    id: rect
    width: 240
    height: 300
    color: "grey"
    SequentialAnimation on x{   //串行动画
        id: rectAnim
        running: false  //默认会自动开启,使用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{
        id: image
        source: "Image/dali.png"
        anchors.horizontalCenter: parent.horizontalCenter
        y: 0
        scale: 0.3
        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
            }
            RotationAnimation{
                target: img
                to: 360
                duration: 1500
            }
            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  //开启垂直方向照片掉落动画
        }
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("组合动画设计")
    Rectangle{
        MouseArea{
            id: mouseArea
            anchors.fill: parent
        }
        CAnimate{}
    }
}

来源：CSDN

作者：沉迷单车的追风少年

链接：https://blog.csdn.net/qq_41895747/article/details/104633920

标签

qml

动画