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

Bharathi

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

p3c0

@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.

Bharathi

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