Bir kişi QML'de nasıl bir 'yukarı, aşağı' animasyon oluşturur?

Question

Bir öğenin, boyutunun ölçeklendiğinde nasıl bir animasyon oluşturduğu, ardından da orijinal boyutuna ölçeklendiği (üstteki/kuşbakışı görünümündeki "zıplayan bir top" düşüncesi). Şimdiye kadar sadece kullanan tek yönlü bir animasyon oluşturmak için nasıl anladım var "konulu Davranışı x/y" parent.x ve parent.y değiştirerek Örneğin

...

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 İstediğiniz animasyonu, onClicked işleyicide başlatılan Dizi Sırası olarak oluşturabilir.

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