QML实现反弹动画

版权声明：本文系作者原创。未经许可，不得转载。

   
import QtQuick 2.0
Rectangle {
    id: area
    width: 700
    height: width
    color: "#00000000"
    Image {
        id: img
        x: parent.width/2-width/2
        y: parent.height/2-height/2
        width: 350
        height: width
        source: "power_twinkle.png"
        function moveCenter(center) {
            img.x = center.x - width/2;
            img.y = center.y - height/2;
        }
        ParallelAnimation {
            id: goToCenterAnimation
            NumberAnimation {
                target: img; properties: "x"
                //此处必须指定id
                to: area.width/2-img.width/2
                  //反弹效果主要靠这个选项
                duration: 500; easing.type: Easing.OutBounce 
            }
            NumberAnimation {
                target: img; properties: "y"
                //此处必须指定id
                to: area.height/2-img.height/2
                  //反弹效果主要靠这个选项
                duration: 500; easing.type: Easing.OutBounce   
            }
        }
        function goBackAnimation () {
            goToCenterAnimation.start();
        }
    }
    MouseArea {
        id: areamouse
        anchors.fill: parent
        onPositionChanged: {
            img.moveCenter(mouse);
        }
        onReleased: {
            img.goBackAnimation();
        }
    }
}