QML 애니메이션을 역방향으로 재생하는 방법

Question

개체를 원한다면 복잡한 경로와 동료가되어 애니메이션으로 이동해야합니다. 경로가 포함 된 선과 곡선입니다. 기차처럼.

두 솔루션 : 1. PathAnimation 또는 다중 애니메이션 2. states

솔루션 (1)의 문제 : 기차는 아마도 임의의 시간이 시점에서 중지 은 (애니메이션을 일시 정지)하고, 다시 역으로 이동 시작 위치 (애니메이션을 반대로 재생).

그래서 반대로 PathAnimation을 재생하는 방법을 알고 싶습니까?

Answer 1

QML에는 그러한 기능이 없다고 생각합니다.

새 경로가 필요할 때마다 새 경로를 설정할 수 있습니다. 애니메이션이 끝나면. 여기

당신이 예를 들어 있습니다

import QtQuick 2.3 
import QtQuick.Controls 1.1 

ApplicationWindow { 
    visible: true 
    width: 350 
    height: 300 

    Rectangle { 
     id: window 
     width: 350 
     height: 300 

     Canvas { 
      id: canvas 
      anchors.fill: parent 
      antialiasing: true 

      onPaint: { 
       var context = canvas.getContext("2d") 
       context.clearRect(0, 0, width, height) 
       context.strokeStyle = "black" 
       context.path = pathAnim.path 
       context.stroke() 
      } 
     } 

     SequentialAnimation { 
      id: mySeqAnim 
      running: true 

      PauseAnimation { duration: 1000 } 

      PathAnimation { 
       id: pathAnim 

       duration: 2000 
       easing.type: Easing.InQuad 

       target: box 
       orientation: PathAnimation.RightFirst 
       anchorPoint: Qt.point(box.width/2, box.height/2) 
       path: myPath1 
      } 

      onStopped: { 
       console.log("test") 

       pathAnim.path = myPath2; 

       mySeqAnim.start(); 
      } 
     } 

     Path { 
      id: myPath1 
      startX: 50; startY: 100 

      PathLine { x: 300; y: 100 } 

      onChanged: canvas.requestPaint() 
     } 

     Path { 
      id: myPath2 
      startX: 300; startY: 100 

      PathLine { x: 50; y: 100 } 

      onChanged: canvas.requestPaint() 
     } 

     Rectangle { 
      id: box 

      x: 25; y: 75 
      width: 50; height: 50 
      border.width: 1 
      antialiasing: true 

      Text { 
       anchors.centerIn: parent 
      } 
     } 
    } 
}