Làm cách nào để tạo hoạt ảnh 'tăng kích thước, sau đó giảm xuống' trong QML?

Question

Làm thế nào để tạo ra một hình ảnh động trong đó một mục có kích thước lớn hơn, sau đó giảm kích thước ban đầu của nó (nghĩ về "quả bóng nảy" từ chế độ xem trên cùng/mắt của chim). Cho đến nay tôi đã chỉ tìm ra cách để tạo ra một hình ảnh động một chiều sử dụng "Hành vi trên x/y" bằng cách sửa đổi parent.x và parent.y

Ví dụ ...

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

Bạn có thể tạo hoạt ảnh mà bạn muốn như là một SequenceAnimation được bắt đầu trong trình xử lý 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 
      } 
     } 
    } 
}