Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to change the opacity for images while using repeater in qml??
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 3.3k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • BharathiB Offline
    BharathiB Offline
    Bharathi
    wrote on last edited by p3c0
    #1
    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;
            }
        }
    }
    
    1 Reply Last reply
    0
    • p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

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

      157

      BharathiB 1 Reply Last reply
      2
      • p3c0P 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.

        BharathiB Offline
        BharathiB Offline
        Bharathi
        wrote on last edited by
        #3

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

        1 Reply Last reply
        1

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved