Display several AnimatedSprite at different speed?

[JaySDC]

Hi,

I have 3 different AnimatedSprite that I want to display, in parallel, at different "speeds".

title
testA
testB

Here is the behavior I try to obtain:

title is set on "pause" and display only the first sprite

testA loops once > when loop is finished:
- change testA opacity to 0
- display title NEXT frame
- change testB opacity to 1
testB loops once > when loop is finished:
- change testB opacity to 0
- display title NEXT frame
- change testA opacity to 1

It seems fairly simple but I can't do it, my QT / coding experience is non-existent even though I did a lot of scripting and macros work.

AnimatedSprite {
        id: title
 
        z: 5
 
        running: true
        paused: true
        opacity: 1
 
        width: 300
        height: 10
 
        x: 100
        y: 100
 
        source: "qrc:/images/Titles/Y_titles___board___118-59___522-77.png"
 
        frameCount: 2
 
        frameWidth: 300
        frameHeight: 10
 
        frameDuration: 1000
        interpolate: false
}
 
AnimatedSprite {
        id: testA
 
        z: 5
 
        running: true
 
        width: 10
        height: 10
 
        x: 100
        y: 110
 
        source: "qrc:/images/Titles/Y_titles___board___118-59___522-77.png"
 
        frameCount: 50
 
        frameWidth: 10
        frameHeight: 10
 
        frameDuration: 1000
        interpolate: false
}
 
AnimatedSprite {
        id: testA
 
        z: 5
 
        running: true
 
        width: 10
        height: 10
 
        x: 100
        y: 110
 
        source: "qrc:/images/Titles/Y_titles___board___118-59___522-77.png"
 
        frameCount: 50
 
        frameWidth: 10
        frameHeight: 10
 
        frameDuration: 1000
        interpolate: false
}

AnimatedSprite {
        id: title

        z: 5

        running: true
        paused: true
        opacity: 1

        width: 300
        height: 10

        x: 100
        y: 100

        source: "qrc:/images/Titles/Y_titles___board___118-59___522-77.png"

        frameCount: 2

        frameWidth: 300
        frameHeight: 10

        frameDuration: 1000
        interpolate: false
}

AnimatedSprite {
        id: testA

        z: 5

        running: true

        width: 10
        height: 10

        x: 100
        y: 110

        source: "qrc:/images/Titles/Y_titles___board___118-59___522-77.png"

        frameCount: 50

        frameWidth: 10
        frameHeight: 10

        frameDuration: 1000
        interpolate: false
}

AnimatedSprite {
        id: testA

        z: 5

        running: true

        width: 10
        height: 10

        x: 100
        y: 110

        source: "qrc:/images/Titles/Y_titles___board___118-59___522-77.png"

        frameCount: 50

        frameWidth: 10
        frameHeight: 10

        frameDuration: 1000
        interpolate: false
}

To copy to clipboard, switch view to plain text mode 

Cheers,
--Jay

[anda_skoa]

I guess you could try using states on the parent element

Item {
    AnimatedSprite {
        id: title
    }
    AnimatedSprite {
        id: testA
 
       onRunningChanged: if (!running) parent.state = "END1"
    }
    AnimatedSprite {
        id: testB
 
       onRunningChanged: if (!running) parent.state = "END2"
    }
 
    state: "START"
 
    states: [
        State {
            name: "START"
 
            PropertyChanges { target: title; currentFrame: 0 }
            PropertyChanges { target: testA; running: true; opacity: 1 }
            PropertyChanges { target: testB; running: false; opacity: 0 }
        },
 
        State {
            name: "END1"
 
            PropertyChanges { target: title; currentFrame: 1 }
            PropertyChanges { target: testA; running: false; opacity: 0 }
            PropertyChanges { target: testB; running: true; opacity: 1 }
        },
 
        State {
            name: "END2"
 
            PropertyChanges { target: title; currentFrame: 2 }
            PropertyChanges { target: testA; running: false; opacity: 1 }
            PropertyChanges { target: testB; running: false; opacity: 0 }
        }
    ]
}

Item {
    AnimatedSprite {
        id: title
    }
    AnimatedSprite {
        id: testA

       onRunningChanged: if (!running) parent.state = "END1"
    }
    AnimatedSprite {
        id: testB

       onRunningChanged: if (!running) parent.state = "END2"
    }

    state: "START"

    states: [
        State {
            name: "START"

            PropertyChanges { target: title; currentFrame: 0 }
            PropertyChanges { target: testA; running: true; opacity: 1 }
            PropertyChanges { target: testB; running: false; opacity: 0 }
        },

        State {
            name: "END1"

            PropertyChanges { target: title; currentFrame: 1 }
            PropertyChanges { target: testA; running: false; opacity: 0 }
            PropertyChanges { target: testB; running: true; opacity: 1 }
        },

        State {
            name: "END2"

            PropertyChanges { target: title; currentFrame: 2 }
            PropertyChanges { target: testA; running: false; opacity: 1 }
            PropertyChanges { target: testB; running: false; opacity: 0 }
        }
    ]
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[JaySDC]

Cheers again for help.

Here is the error I get:
"QML StateGroup: Can't apply a state change as part of a state definition."

I tried to apply the code you wrote to mine.
Then I just copy/pasted it raw.

In both cases I get the same error : /.


this is the ressources I found on the subject:

1)
"No part of a state definition should trigger an additional state change (for that particular stategroup),
as the state machine can't handle changing from one state to another until it has completely entered the
first state. You might be able to get some useful debug information using the environmental variable
STATECHANGE_DEBUG (set to 1) -- it should be able to at least tell you the second state that is being triggered.

Regards,
Michael"

2)
"This happens when you try to set a state in an element that is already
changing its state."

However even if I understand what it means, my experience is too weak to solve the issue


Yours,
--Jay

[anda_skoa]

Hmm, try this:

remove the properties, that are set by the PropertyChanges line, from the element definitions.
I.e none of the AnimatiedSprite elements should have a opacity or running line.

Cheers,
_

[JaySDC]

Hi,

Quick word to let you know that a friend of mine helped me use your solution with PropertyChanges and everything works now!


Thanks again for the great help : D

--Jay