¿Cómo se puede crear una animación 'ampliar, bajar' en QML?

Question

¿Cómo se crea una animación en la que un elemento se amplía en tamaño y luego se reduce a su tamaño original (piense en una "pelota que rebota" desde una vista de pájaro/superior). Hasta ahora sólo he encontrado la manera de crear una animación de un solo sentido el uso de "Comportamiento en caso de x/y" modificando el parent.x y parent.y

Por ejemplo ...

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

Usted puede crear la animación que desee como SequenceAnimation que se inicia en el controlador onClicked.

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