क्यूएमएल में एक 'स्केल अप, फिर डाउन' एनीमेशन कैसे बनाता है?

Question

कोई एनीमेशन कैसे बनाता है जहां कोई आइटम आकार में स्केल करता है, फिर उसके मूल आकार में स्केल करता है (शीर्ष/पक्षी के आंख दृश्य से "बाउंसिंग बॉल" के बारे में सोचें)। अब तक मैं सिर्फ पता लगा है का उपयोग करते हुए एक-तरफ़ा एनिमेशन बनाने के लिए कैसे "पर व्यवहार x/y" parent.x और parent.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; 
      } 
     } 
    } 
} 

Answer 1

आप एक अनुक्रम एनीमेशन के रूप में इच्छित एनीमेशन बना सकते हैं जो ऑनक्लेटेड हैंडलर में शुरू होता है।

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