【QML】简单动画实现

半生瓜的blog

发布于 2023-05-13 13:58:29

4460

发布于 2023-05-13 13:58:29

QML动画

**示例1：**动画作为属性值的来源

import QtQuick 2.0

//动画作为属性值的来源
//语法: 动画on属性
//easing属性来实现缓和曲线
Rectangle{
    width: 100
    height: 100
    color: "red"
    PropertyAnimation on x{
        to:50
        duration: 1000
        loops: Animation.Infinite //无限循环
        easing.type: Easing.OutBounce//反弹效果
    }
    PropertyAnimation on y{
        to:50
        duration: 1000
        loops: Animation.Infinite
        easing.type: Easing.OutBounce
    }
}

**示例2：**行为动画

import QtQuick 2.0

//行为动画
//Behavior为一个属性来指定默认的动画
Item{
    width: 100
    height: 100

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

        Behavior on x{
            PropertyAnimation{duration: 500}
        }
        Behavior on y{
            PropertyAnimation{duration: 500}
        }
    }

    MouseArea{
        anchors.fill:parent
        onClicked: {
            rect1.x = mouse.x
            rect1.y = mouse.y

        }

    }
}

**示例3：**信号处理器中的动画

import QtQuick 2.0

//行为动画
//Behavior为一个属性来指定默认的动画

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

        MouseArea{
            anchors.fill:parent
            onClicked:PropertyAnimation{
                target: rect1
                properties: "x,y"
                to:50
                duration:2000
            }
        }
}

**示例4:**独立动画

import QtQuick 2.0

//独立动画(动画作为普通的QML对象来创建)
Rectangle{
    id:rect1
    width: 100
    height: 100
    color:"green"
    PropertyAnimation{
        id:rect1_animation
        target:rect1
        properties: "x,y"
        duration: 1000

    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            rect1_animation.to = 50
            rect1_animation.running = true
        }
    }
}

**示例5：**状态切换

import QtQuick 2.0

//状态切换
Rectangle{
    id:rect1
    width: 100
    height: 100
    color:"green"

    MouseArea{
        anchors.fill: parent
        onClicked: {
            rect1.state = "moved"
        }
        onReleased: {
            rect1.state = "moved_2"
        }
    }

    //状态列表
    //states:[]
    states:[
        State {
            name:"moved"
            PropertyChanges {
                target: rect1
                x:50
                y:50
            }
        },
        State {
            name:"moved_2"
            PropertyChanges {
                target: rect1
                x:20
                y:20
            }
           }
    ]

    transitions: Transition {
            PropertyAnimation{
                properties:"x,y"
                duration: 1000

            }
    }
}

**示例6：**动画元素

  import QtQuick 2.0

//动画元素
Rectangle{
    width: 200
    height: 200


    //颜色
    ColorAnimation on color{
         from:"yellow"
         to:"red"
         duration: 2000
    }

    //旋转
    RotationAnimation on rotation {
        to:90
        duration: 3000
        direction: RotationAnimation.Clockwise//顺时针方向
    }
}

**示例7：**组合动画

import QtQuick 2.0

//组合动画
Rectangle{
    width: 100
    height: 100

    Image{
        source:"picture.jpg"
        anchors.horizontalCenter: parent.horizontalCenter
        y:0
        SequentialAnimation on y{
            loops:Animation.Infinite
            NumberAnimation{
                to:250
                easing.type: Easing.OutBounce
                duration: 1000
            }

            PauseAnimation {
                duration: 1000
            }

            NumberAnimation {
                to:0
                easing.type: Easing.OutBounce
                duration: 1000
            }
        }
    }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-03-30，如有侵权请联系 cloudcommunity@tencent.com 删除

duration