How to create a "zoom, then down" animation in QML?

Question

How to create an animation where an element is scaled to fit and then scaled to its original size (think of a "bouncing ball" from the top / bird's eye). So far, I have only figured out how to create a one-way animation using "Behavior by x / y" by changing parent.x and parent.y

For instance...

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; } } } } 

Answer 1

You can create the desired animation as a SequenceAnimation sequence, which runs in the onClicked handler.

 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 } } } }