// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
Item {
id: root
property string source
property bool from1to2: true
property int interval: 500
onSourceChanged: {
if (from1to2) {
image02.source = source
image02.opacity = 1
image01.opacity = 0
} else {
image01.source = source
image01.opacity = 1
image02.opacity = 0
}
from1to2 = !from1to2
}
Image {
id: image01
anchors.fill: parent
sourceSize.height: parent.height
sourceSize.width: parent.width
fillMode: Image.PreserveAspectCrop
opacity: 1
Behavior on opacity {
NumberAnimation { duration: root.interval }
}
}
Image {
id: image02
anchors.fill: parent
sourceSize.height: parent.height
sourceSize.width: parent.width
fillMode: Image.PreserveAspectCrop
opacity: 0
Behavior on opacity {
NumberAnimation { duration: root.interval }
}
}
Component.onCompleted: {
image01.source = root.source
}
}
}
sabato 9 giugno 2012
FadingImage QML Component
I have written a qml component to swap a picture with a fading animation. Usage is simple, whenever the source property changes, the component fades out the current image and fades in the new one. Default interval is 500ms, but it can be changed to any desidered value.
Iscriviti a:
Commenti sul post (Atom)
Nessun commento:
Posta un commento