Animacja dla programu ładującego Qml, gdy program loader.source zmienia

Question

Czy istnieje sposób zastosowania animacji po zmianie komponentu Loader w QML? Na przykład załóżmy, mam następujące Loader:

Loader { 
    anchors.fill: parent 
    id: loader 
} 

Chcę animację od lewej do prawej, kiedy ustawić loader.source = "content.qml"

Dzięki za pomoc.

Answer 1

Jest to jeden ze sposobów, aby to zrobić:

import QtQuick 2.4 
import QtQuick.Window 2.0 

Window { 
    id: window 
    width: 400 
    height: 400 
    visible: true 

    Loader { 
     id: loader 
     onSourceChanged: animation.running = true 

     NumberAnimation { 
      id: animation 
      target: loader.item 
      property: "x" 
      from: 0 
      to: window.width - loader.item.width 
      duration: 1000 
      easing.type: Easing.InExpo 
     } 
    } 

    // Replace this with some other action that changes the source. 
    Component.onCompleted: loader.source = "MyRectangle.qml" 
} 

MyRectangle.qml:

import QtQuick 2.0 

Rectangle { 
    id: rect 
    color: "red" 
    width: 150 
    height: 150 
} 

Answer 2

Czy jest obowiązkowe użycie Loader?

Jeśli nie, możesz użyć StackView (oczywiście o głębokości 1, jeśli nie chcesz zaoferować bardziej złożonej nawigacji) i załadować swoje komponenty, przesuwając je na stosie za pomocą zestawu opcji replace na prawdę.

Mimo to, można uzyskać wynik prosicie w następujący sposób:

StackView { 
    delegate: StackViewDelegate { 
     function transitionFinished(properties) { 
      properties.exitItem.x = 0 
     } 

     pushTransition: StackViewTransition { 
      PropertyAnimation { 
       target: enterItem 
       property: "x" 
       from: enterItem.width 
       to: 0 
      } 

      PropertyAnimation { 
       target: exitItem 
       property: "x" 
       from: 0 
       to: -exitItem.width 
      } 
     } 
    } 
} 

przepraszam jeśli to nie działa, jak jest (choć powinno), ale jestem na telefon komórkowy telefon i nie możemy go teraz przetestować.