QML: Comment faire de jolie effet de transition entre les sources d'image (l'un se fond dans l'autre)?

Je me demande comment faire des transitions en douceur entre les sources d'image dans QML, j'essaie

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

Mais Il ne fonctionne pas sur la source comme une transition juste comme état final changer.. donc je me demande comment faire une source de l'image fondu dans l'andothe et à l'arrière?

OriginalL'auteur myWallJSON | 2012-04-19

  1. 9

    Vous souhaitez que la première image de disparaître dans l'autre? Que diriez-vous si vous placez deux Image objets sur le dessus de chaque autre, puis d'animer la opacity propriété?

    EDIT: Cela a fonctionné pour moi (je suis en utilisant QtQuick 1.0, car mon Qt Creator installation est un peu dépassé):

    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

  }
}

    À la question dans votre commentaire: vous pouvez placer l'image au-dessus de l'autre en copiant les ancres thru anchors.fill: rect

    Mais comment faire pour placer des images sur le dessus de l'un à l'autre?
    Mon humble avis il est mieux si vous supprimez l'échelle de l'animation, mais c'était juste pour démontrer l'opacité de l'animation.
    myWallJSON: je suis assez sûr que tout élément a déclaré après l'autre sera tiré sur le dessus de cela. Alternativement, vous pouvez utiliser la propriété z qui définit la profondeur z.

    OriginalL'auteur teukkam

  2. 0

    Ici est également un simple défilement de transition entre les 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" ]
}
}

    OriginalL'auteur Artem Zaytsev