QML: How to make a good transition effect between image sources (one disappears into the other)?

Question

I wonder how to make smooth transitions between image sources in QML, I'm trying

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

But it does not work on the source as a transition, as well as the final state change. So I'm wondering how to make one image source fade out and come back?

Answer 1

Do you want the first image to disappear in another? How about placing two Image objects on top of each other, animate the opacity property?

EDIT: This worked for me (I am using QtQuick 1.0 because my Qt Creator installation is a bit outdated):

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

To the question in your comment: you can place the image exactly on top of another by copying the anchors through anchors.fill: rect

Answer 2

Here is also a simple transition between images:

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