qml 触发动画

触发动画有多种方式，这里介绍4种，分别是：

        直接触发、点击触发、独立触发、按压触发。

案例：火箭发射的4种姿势 ~

main.qml 

import QtQuick

Window {
    width: 800
    height: 500
    visible: true
    title: qsTr("触发动画")

    ClickableImage {
        id: img1
        source: "image/火箭3.png"
        y: 450
        text: "程序运行即触发"


        NumberAnimation on y {
            to: -5
            duration: 3000
        }
    }

    ClickableImage {
        id: img2
        source: "image/火箭3.png"
        x: 200
        y: 385
        text: "点击图片触发"

        // 这里就是行为触发，点击后y的值被修改则触发动画
        Behavior on y {
            NumberAnimation {
               duration: 3000
            }
        }
        onClicked: y = -5
    }

    ClickableImage {
        id: img3
        source: "image/火箭3.png"
        x: 400
        y: 385
        text: "独立触发"

        NumberAnimation {
            id: am
            target: img3 // target指定哪个对象产生动画（targets可以同时指定多个对象）
            from: 385 // from指定数值动画的起始值，和property同时使用
            to: -5 // to指定数值动画的目标值，即动画达到此值结束
            duration: 3000
            property: "y" // property指定哪个值变化，一般和from同时使用
        }

        // restart方法可以重复触发动画，start只能触发一次，
        // 但由于此处是独立动画，所以2个方法都可以起到重复触发的功能
        onClicked: am.start()
    }

    ClickableImage {
        id: img4
        source: "image/火箭3.png"
        x: 600
        y: 385
        text: "按压触发"

        NumberAnimation {
            id: am1
            target: img4
            from: 385
            to: -5
            duration: 3000
            property: "y"
            running: msa.pressed //这里用的是pressed，而不是pressed()，因为我们只需要它的状态，而不是方法
        }

        MouseArea {
            id: msa
            anchors.fill: parent
        }
    }
}

ClickableImage.qml 

import QtQuick

Item {
    id: root
    width: container.childrenRect.width // 宽高设置为子元素的宽高
    height: container.childrenRect.height

    property alias text: label.text
    property alias source: image.source

    signal clicked

    Column {
        id: container

        Image {
            id: image
        }

        Text {
            id: label
            width: image.width
            wrapMode: Text.WordWrap // 开启自动换行
            horizontalAlignment: Text.AlignHCenter // 设置文本项宽度和高度内文本的水平和垂直对齐方式
            color: "black"
        }
    }

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

 第4种的按压触发，有个有意思的地方，就是如果快速点击，而不是持续按压，火箭会有个跳动的效果。如果后期放在一些文字特效上使用，应该效果不错，挺丝滑的 ~