Forums

OverviewV-Play 2 Support (Qt 5) › Repeater Animation

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #9986

    Phil

    Hi. In my code I’m creating a large number of items using a Repeater element. I want each item to appear sequentially with an appear animation, eg a fade in, slide in, etc. I’ve included my code below for the case without the animation. Now I’m not sure how to include the animation. I’ve tried repeater.itemAt(i).animation.start() but it doesn’t work. Thanks, Phil

     

        Grid {
            id: grid
            anchors.centerIn: parent
            columns: 8
            rows: 12
            Repeater {
                id: repeater
                model: 8*12
                Rectangle{
                    id: rectangle
                    width: parent.parent.width / 8
                    height: parent.parent.height / 12
                    color: "black"
                    opacity: 0
                    NumberAnimation{
                        id: animation
                        target: parent
                        properties: "opacity"
                        from: 0
                        to: 1
                    }
                }
            }
        }
    
        Timer{
            id: gridTimer
            repeat: true
            running: true
            interval: 10
            onTriggered: {
                if(time<8*12){
                   gridRepeater(time)
                }
                time++
            }
        }
    
        function gridRepeater(i){
            repeater.itemAt(i).opacity = 1
        }

     

     

    #9988

    Alex
    V-Play Team

    Hi Phil,

    if you want to use repeater.itemAt(i).animation.start(), then you need to make sure that the animation is a property of the item you are accessing, you can do this by adding property alias animation: animation to the rectangle. (because else the animation component is just a private internal component of the rectangle and is not accessible from outside)

    Another solution would be using a Behavior on the opacity property of the rectangle, then simply setting the opacity to 1 (like you do now) will also result in a fade.

    Cheers,
    Alex

    #9989

    Phil

    Thanks, Alex. The first method works if I change the target in the NumberAnimation from parent to rectangle. The second method works well also.

Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support