QML: Jak uzyskać ładny efekt przejścia między źródłami obrazu (jeden z nich przechodzi w drugi)?

Question

zastanawiam się jak zrobić płynne przejścia betwen źródeł obrazu w QML, staram

import QtQuick 1.1 
Image { 
    id: rect 
    source: "quit.png" 
    smooth: true 
    MouseArea { 
     id: mouseArea 
     anchors.fill: parent 
     anchors.margins: -10 
     hoverEnabled: true   //this line will enable mouseArea.containsMouse 
     onClicked: Qt.quit() 
    } 

    states: State { 
     name: "mouse-over"; when: mouseArea.containsMouse 
     PropertyChanges { target: rect; scale: 0.8; source :"quit2.png" } 
    } 

    transitions: Transition { 
     NumberAnimation { properties: "scale, source"; easing.type: Easing.InOutQuad; duration: 1000 } 
    } 
} 

Ale to nie działa na źródła jako przejście tylko jako ostatecznej zmiany stanu .. więc zastanawiam się jak zrobić jedno źródło obrazu zniknąć w andothe i z powrotem?

Answer 1

Chcesz, aby pierwsze zdjęcie zanikało w drugim? A jeśli umieścisz dwa obiekty Image jeden na drugim, a następnie animujesz właściwość opacity?

EDIT: To pracował dla mnie (ja używam QtQuick 1.0 bo moja instalacja Qt Creator jest nieco przestarzały):

import QtQuick 1.0 
Rectangle { 
Image { 
    id: rect 
    source: "quit.png" 
    smooth: true 
    opacity: 1 
    MouseArea { 
     id: mouseArea 
     anchors.fill: parent 
     anchors.margins: -10 
     hoverEnabled: true   //this line will enable mouseArea.containsMouse 
     onClicked: Qt.quit() 
    } 


    states: State { 
     name: "mouse-over"; when: mouseArea.containsMouse 
     PropertyChanges { target: rect; scale: 0.8; opacity: 0} 
     PropertyChanges { target: rect2; scale: 0.8; opacity: 1} 
    } 

    transitions: Transition { 
     NumberAnimation { properties: "scale, opacity"; easing.type: Easing.InOutQuad; duration: 1000 } 
    } 
} 

Image { 
    id: rect2 
    source: "quit2.png" 
    smooth: true 
    opacity: 0 
    anchors.fill: rect 

    } 
} 

Na pytanie w komentarzu: można umieścić obraz dokładnie na szczycie z drugiej strony, kopiując kotwice thru anchors.fill: rect

Answer 2

Tutaj jest również proste przewijania przejścia między obrazami:

import QtQuick 2.6 
import QtQuick.Controls 1.4 
import QtQuick.Window 2.2 

Window { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 



    Rectangle { 
    id: imageRect 

    anchors.centerIn: parent 
    width: 240 
    height: 320 
    clip: true 

    property int currentIndex: 0 
    property var imageSources: [ "imageLeft.jpg", "imageCenter.jpg" ] 

    Repeater { 
     model: imageRect.imageSources 

     Image { 
     id: image 

     width: parent.width 
     height: parent.height 

     x: index * parent.width - imageRect.currentIndex * parent.width 
     fillMode: Image.PreserveAspectFit 
     source: imageRect.imageSources[index] 
     Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } } 
     } 
    } 
    } 

    Button { 
    id: leftButton 
    anchors.bottom: parent.bottom 
    text: "left" 
    onClicked: if(imageRect.currentIndex > 0) imageRect.currentIndex-- 
    } 

    Button { 
    id: rightButton 
    anchors.bottom: parent.bottom 
    anchors.left: leftButton.right 
    text: "right" 
    onClicked: if(imageRect.currentIndex < imageRect.imageSources.length - 1) imageRect.currentIndex++ 
    } 

    Button { 
    id: addButton 
    anchors.bottom: parent.bottom 
    anchors.left: rightButton.right 
    text: "+" 
    onClicked: imageRect.imageSources = [ "imageLeft.jpg", "imageCenter.jpg" , "imageRight.jpg" ] 
    } 
}