QML: come creare un piacevole effetto di transizione tra le fonti di immagini (una sfuma nell'altra)?

Question

mi chiedo come fare transizioni omogenee tra Stati fonti di immagini in QML, cerco

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 } 
    } 
} 

Ma non funziona in origine come una transizione così come il cambiamento stato finale .. così mi chiedo come fare fonte un'immagine svanire in andothe e indietro?

Answer 1

Vuoi che la prima immagine svanisca nell'altra? Che ne dici se collochi due oggetti Image uno sopra l'altro, quindi si anima la proprietà opacity?

EDIT: Questo ha funzionato per me (sto usando QtQuick 1.0 perché la mia installazione Qt Creator è un po 'datato):

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 

    } 
} 

Alla domanda nel tuo commento: è possibile inserire l'immagine esattamente in cima dell'altro copiando i tasselli attraverso anchors.fill: rect

Answer 2

Qui si trova anche una semplice transizione scorrere le immagini:

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" ] 
    } 
}