QML: ¿Cómo hacer un bonito efecto de transición entre las fuentes de imagen (una se desvanece en la otra)?

Question

me pregunto cómo hacer transiciones suaves Transcurrirá fuentes de imagen en QML, trato

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

Pero no funciona en la fuente como una transición al igual que el cambio estado final .. así que me pregunto cómo hacer que una fuente de la imagen desvanecerse en andothe y volver?

Answer 1

¿Desea que la primera imagen se desvanezca en la otra? ¿Qué tal si coloca dos objetos Image uno encima del otro, y luego anima la propiedad opacity?

EDIT: Esto funcionó para mí (estoy usando QtQuick 1.0 porque mi instalación de Qt Creator es un poco obsoleta):

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 

    } 
} 

a la pregunta en su comentario: se puede colocar la imagen exactamente en la parte superior del otro copiando los anclajes a través anchors.fill: rect

Answer 2

Aquí es también una transición simple desplazamiento entre las imágenes:

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