QML 组件抖动效果实现

《QML基础教程》总目录

---

一、简述

如图所示

---

二、关键代码分析

	//被抖动的对象  不能使用锚定位方式布局，xy抖动会无效。应使用xy手动定位位置
    Rectangle{
        id: rect
        x: parent.width / 2 - rect.width / 2
    }
	//属性动画，对目标rect做抖动动画，水平抖动操作x属性，垂直操作y，旋转操作rotation
    PropertyAnimation {
        id: shakeAnimation
        property int originVal //记录抖动前的原始值
        target: rect
        property: targetProperty // "x" 或 "y" 或 "rotation"
        from: originVal - model.offset //动画开始属性的值  如果是旋转抖动，可以是-10度
        to: originVal + model.offset //动画结束时属性的值 如果是旋转抖动，抖动到10度
        duration: 60
        easing.type: Easing.InOutQuad
        loops: 3 //循环3次
        onFinished: target[targetProperty] = originVal //显示归位
    }
    
    
    AbstractButton{
        id: btn
        ...
        onClicked: {
            shakeAnimation.originVal = rect[targetProperty]
            shakeAnimation.start() //开始动画
        }
    }

二、完整代码

import QtQuick
import Qt5Compat.GraphicalEffects
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    //    color: "#00000000"
    title: " "


    ListView{
        id: listView
        anchors.fill: parent
        orientation: ListView.Horizontal
        model: ListModel{
            ListElement{action:"旋转抖动";offset:10;targetProperty:"rotation"}
            ListElement{action:"水平抖动";offset:10;targetProperty:"x"}
            ListElement{action:"垂直抖动";offset:10;targetProperty:"y"}
            ListElement{action:"缩放抖动";offset:0.5;targetProperty:"scale"}
        }

        delegate: Item{
            width: 100
            height: listView.height
            Column{
                anchors.centerIn: parent
                spacing: 10
                Item{
                    width: 40
                    height: width
                    anchors.horizontalCenter: parent.horizontalCenter
                    Rectangle{
                        id: rect
                        x: parent.width / 2 - rect.width / 2
                        width: 40
                        height: width
                        radius: 6
                        border{
                            color: "black"
                            width: 2
                        }

                        Rectangle{
                            y: -16
                            z: rect.z - 1
                            anchors.horizontalCenter: rect.horizontalCenter
                            width: 20
                            height: width
                            radius: 6
                            border{
                                color: "black"
                                width: 2
                            }
                        }
                    }
                }//Item

                PropertyAnimation {
                    id: shakeAnimation
                    property int originVal
                    target: rect
                    property: targetProperty
                    from: originVal - model.offset
                    to: originVal + model.offset
                    duration: 60
                    easing.type: Easing.InOutQuad
                    loops: 3
                    onFinished: target[targetProperty] = originVal
                }


                AbstractButton{
                    id: btn
                    text: model.action
                    anchors.horizontalCenter: parent.horizontalCenter
                    contentItem: Text{
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        color: "white"
                        text: btn.text
                    }
                    background: Rectangle{
                        implicitHeight: 28
                        implicitWidth: 60
                        color: btn.pressed ? "#2b45d3" : "#2436ad"
                        radius: 6
                    }
                    onClicked: {
                        shakeAnimation.originVal = rect[targetProperty]
                        shakeAnimation.start()
                    }
                }
            }
        }
    }
}