CODEWITHSUNDEEP
qtqml
myWallJSON
myWallJSON

Reputation: 9512

QML: How to make nice transition effect between image sources (one fades into the other)?

I wonder how to make smooth transitions betwen image sources in QML, I try

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 source as a transition just as final state change.. so I wonder how to make one image source fade into andothe and back?

Upvotes: 7

Views: 18068

Answers (2)

Artem Zaytsev
Artem Zaytsev

Reputation: 1695

Here is also a simple scroll 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" ]
  }
}

Upvotes: 0

teukkam
teukkam

Reputation: 4317

You want the first image to fade out into the other? How about if you place two Image objects on top of each other, then animate the opacity property?

EDIT: This worked for me (I'm 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 the other by copying the anchors thru anchors.fill: rect

Upvotes: 9

Related Questions