QML計時器過渡

Question

import QtQuick 2.0 

Rectangle { 

id: rec 
property int img_in:2 
property int img_out:3 

Image { 
    id: imgout 
    source: "pics/"+img_out+".jpg" 
    opacity: 1 
    anchors.fill: parent 
} 

Image { 
    id: imgin 
    source: "pics/"+img_in+".jpg" 
    opacity: 0 
    anchors.fill: imgout 
    } 

Timer { 
    interval: 5000 
    repeat: true 
    running: true 
    onTriggered: { 
     img_in = img_in+1 
     img_out = img_out+1 
     anim.running = true; 
    } 
} 

states: State { 
    name: "state1" 
    PropertyChanges { target: imgout; opacity: 0} 
    PropertyChanges { target: imgin; opacity: 1} 
} 

SequentialAnimation { 
    id: anim 
    NumberAnimation { target: imgin; properties: "opacity"; easing.type: Easing.InOutQuad; duration: 1500 } 
    NumberAnimation { target: imgout; properties: "opacity"; easing.type: Easing.InOutQuad; duration: 1500 } 
} 

}

合併，我想知道，如果問題是出在不透明或圖片數量的變化。圖片確實發生了變化（突然），但沒有動畫。 Inside onTriggered我試圖使用這些選項：狀態，SequentialAnimation加轉換。沒有幫助。

Answer 1

所以我把你的代碼和定製了一下。它基本上從pics/1.jpg開始淡入淡出pics/2.jpg，然後繼續下一個圖像。您應該可以使用它並根據需要進行更改。

重要的，沒有必要與States做到這一點的Image元素，而使用Behaviouropacity

希望這回答您的問題！它確實是一個不錯的幻燈片！

import QtQuick 2.0 

Rectangle { 
    id: rec 

    // [1] First image is to be display is pics/1.jpg, 
    // followed by 2.jpg, 3.jpg, etc... 
    property int currentIndex: 1 
    property int nextIndex: 2 

    // [2] When swapping the image sources we need 
    // to block the animation behaviour. 
    // By default turn it on. 
    property bool allowBehaviour: true 

    // [3] When the 'rec' is loaded 
    // set the current image to fade out 
    // and the next image to fade in. 
    Component.onCompleted: { 
     currentImage.opacity = 0; 
     nextImage.opacity = 1; 
    } 

    Image { 
     id: currentImage 
     source: "pics/" + currentIndex + ".jpg" 
     opacity: 1 
     anchors.fill: parent 

     // [4] Here we define that whenever we change the 
     // opacity we want it to animate. Notice the enable 
     // is tied to `allowBehaviour` 
     Behavior on opacity { 
      enabled: allowBehaviour 
      NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 } 
     } 
    } 

    Image { 
     id: nextImage 
     source: "pics/" + nextIndex + ".jpg" 
     opacity: 0 
     anchors.fill: currentImage 

     // [5] See [4] above. 
     Behavior on opacity { 
      enabled: allowBehaviour 
      NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 } 
     } 
    } 

    Timer { 
     interval: 2500 
     repeat: true 
     running: true 

     onTriggered: { 
      // [6] Block the Behaviour animation. 
      allowBehaviour = false; 

      // [7] Advance the indices. 
      currentIndex = nextIndex; 
      ++nextIndex; 

      // [8] This is key, set the current 
      // image to visible and the next 
      // image to invisible. This happens 
      // instantly as the Behaviour is off. 
      currentImage.opacity = 1; 
      nextImage.opacity = 0; 

      // [9] Turn the behaviour so the 
      // opacity change at [10] will 
      // cause an animation. 
      allowBehaviour = true; 

      // [10] Like [3] set the current 
      // image to fade out and the 
      // next image to fade in. 
      currentImage.opacity = 0; 
      nextImage.opacity = 1; 
     } 
    } 
}