qt - 如何在QML中创建“按比例放大，然后按比例缩小”动画？

如何制作一个动画，其中一个项目会按比例放大，然后按比例缩小到其原始大小（从俯视图/鸟瞰图看“弹跳球”）。到目前为止，我只想出了如何通过修改parent.x和parent.y使用“行为x / y”创建单向动画的方法

例如...

Rectangle {
id: container;
    width: 700
    height: 700
    function goForIt(parent) {
        parent.x = (Math.floor(Math.random()*600));
        parent.y = (Math.floor(Math.random()*600));
        parent.width += 100;
        parent.height += 100;
    }
    Image {
        id: head;
        source: "vlad.png";
        height: 80;
        width: 90;
        MouseArea {
            anchors.fill: parent
            onClicked: goForIt(parent);
        }
        Behavior on x {
            PropertyAnimation {
                target: head;
                properties: "x";
                duration: 1000;
            }
        }
        Behavior on y {
            PropertyAnimation {
                target: head;
                properties: "y";
                duration: 1000;
            }
        }
        Behavior on height {
            PropertyAnimation {
                target: head;
                properties: "height";
                duration: 1000;
            }
        }
        Behavior on width {
            PropertyAnimation {
                target: head;
                properties: "width";
                duration: 1000;
            }
        }
    }
}

最佳答案

您可以将所需的动画创建为在OnClicked处理程序中启动的SequenceAnimation。

import QtQuick 1.0

Rectangle {
    id: container;
    width: 700
    height: 700
    function goForIt(parent) {
        parent.x = (Math.floor(Math.random()*600));
        parent.y = (Math.floor(Math.random()*600));
        bounceAnimation.start();
    }

    Image {
        id: head;
        source: "vlad.png";
        x: 0
        y: 0
        height: 80;
        width: 90;
        MouseArea {
            anchors.fill: parent
            onClicked: goForIt(parent);
        }
        Behavior on x {
            PropertyAnimation {
                target: head;
                properties: "x";
                duration: 1000;
            }
        }
        Behavior on y {
            PropertyAnimation {
                target: head;
                properties: "y";
                duration: 1000;
            }
        }

        transform: Scale {
            id: scaleTransform
            property real scale: 1
            xScale: scale
            yScale: scale
        }

        SequentialAnimation {
            id: bounceAnimation
            loops: 1
            PropertyAnimation {
                target: scaleTransform
                properties: "scale"
                from: 1.0
                to: 2.0
                duration: 500
            }
            PropertyAnimation {
                target: scaleTransform
                properties: "scale"
                from: 2.0
                to: 1.0
                duration: 500
            }
        }
    }
}

关于qt - 如何在QML中创建“按比例放大，然后按比例缩小”动画？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8391733/