Jak utworzyć animację "powiększaj i pomniejsz" w QML?

Question

W jaki sposób utworzyć animację, w której element powiększa się, a następnie skaluje do pierwotnego rozmiaru (pomyśl o "odbijaniu piłki" z widoku z góry/z lotu ptaka). Do tej pory tylko zorientowali się, jak stworzyć animację za pomocą jednokierunkowej „Zachowanie na x/y” modyfikując parent.x i parent.y

Na przykład ...

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 może stworzyć animację, którą chcesz jako SequenceAnimation, która jest uruchamiana w module obsługi 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 
      } 
     } 
    } 
}