⚠️ Forum Maintenance: Feb 6th, 8am - 14pm (UTC+2)

ParallelAnimation with multiple items

  • I'd like to animate two distinct objects in parallel, but I'm unsure what's the best way to go about it.

    I tried something like below

    // ball is also an instance of Rectangle below, as is player.
    function kick(ball) {
    player.ball = ball
    player.nX = player.x + 100
    ball.nX = ball.x + 200
    player.state = "moved"

    Rectangle {
    id: player
    property int nX: 0
    property int nY: 0
    property bool push: false
    property variant ball // kicked ball

    color: "red"
    states: State {
        name: "moved";
        PropertyChanges { target: ball; x: nX; y: nY; restoreEntryValues: false }
    transitions: Transition {
        from: ""; to: "moved";
        ParallelAnimation {
            NumberAnimation { properties: "x,y"; duration: 200; easing.type: Easing.InOutQuad}
            NumberAnimation { target: ball; property: "x"; to: ball.nX; duration: 200; easing.type: Easing.InOutQuad }


    And while both the player and ball moved, they did not move in parallel.
    I'm tempted to just forget about ParallelAnimation and just roll my own, but is there a common idiom for this that I should follow?

Log in to reply