How to change the opacity for images while using repeater in qml??



  • import QtQuick 2.0
    Repeater{
        id:repeat
        model:2
    Rectangle {
        id: rec
        property int currentIndex: 1
        property int nextIndex: 2
        property bool allowBehaviour: true
    	property variant imagearr:[img_array,img_array1];
        property variant curimgid:["img1","img2"];
        property variant nxtimgid:["nimg1","nimg2"];
    	
        x:xval[index]
    	y:0
        width:500
    	height:1020
        Component.onCompleted: {
            currentImage.opacity = 0;
            nextImage.opacity = 1;
        }
    
        Image {
            id: currentImage
            source:  imagearr[index][currentIndex]
            opacity: 1
            anchors.fill: parent
    
            Behavior on opacity {
                enabled: allowBehaviour
                NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 }
            }
        }
    
        Image {
            id: nextImage
            source:  imagearr[index][nextIndex]
            opacity: 0
            anchors.fill: currentImage
    
            Behavior on opacity {
                enabled: allowBehaviour
                NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 }
            }
        }
    
        Timer {
            interval: 2500
            repeat: true
            running: true
    
            onTriggered: {
                allowBehaviour = false;
               
                currentIndex = nextIndex;
                ++nextIndex;
    
                currentImage.opacity = 1;
                nextImage.opacity = 0;
    
                allowBehaviour = true;
                currentImage.opacity = 0;
                nextImage.opacity = 1;
            }
        }
    }
    

  • Moderators

    @Bharathi Here is a simple working example which you can try:

    Item {
        width: 400
        height: 200
    
        Row {
            Repeater {
                model: 4
                Rectangle {
                    id: rect
                    color: "red"
                    width: 50
                    height: 50
                    opacity: 0.0
                    Behavior on opacity {
                        NumberAnimation {
                            target: rect
                            property: "opacity"
                            duration: 1000*index
                            easing.type: Easing.InOutQuad
                        }
                    }
                    Component.onCompleted: opacity = 1.0
                }
            }
        }
    }
    

    You can try to replace Rectangle with Image.



  • @p3c0 Really Its very helpful & it works .Thanks a lot.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.