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.

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

Nessun commento:

Posta un commento