SequentialAnimation created from JS not animating

[hmasterwang]

Hi all,

I am trying to create and set animations dynamically. The animations works perfectly if statically written in original QML file. When creating animations from JS, it sucks. Nothing is animating.


The original qml code:
QML:

Image {
        id: prologueImage
        anchors.fill: parent
        source: "image://encimg/prologue/splash.png"
    }
 
    SequentialAnimation {
        running: true;
        PropertyAnimation {
            from: 0
            to: 1
            target: prologueImage
            duration: 2000
            property: "opacity"
        }
    }

Image {
        id: prologueImage
        anchors.fill: parent
        source: "image://encimg/prologue/splash.png"
    }

    SequentialAnimation {
        running: true;
        PropertyAnimation {
            from: 0
            to: 1
            target: prologueImage
            duration: 2000
            property: "opacity"
        }
    }

To copy to clipboard, switch view to plain text mode 

New code:
QML:

import "PFunc.js" as PFunc
 
Rectangle {
        id: imgWrapper
        anchors.fill: parent
        Component.onCompleted: {
            var image = PresenterFunctions.createImage(imgWrapper);
            image.source = "image://encimg/prologue/splash.png";
 
            var seqAnimation = PFunc.createSequentialAnimation(imgWrapper);
            var aniFIn = PFunc.createPropertyAnimation(seqAnimation, 0, 1, image, "opacity", 2000);
 
            seqAnimation.start();
        }
 
}

import "PFunc.js" as PFunc

Rectangle {
        id: imgWrapper
        anchors.fill: parent
        Component.onCompleted: {
            var image = PresenterFunctions.createImage(imgWrapper);
            image.source = "image://encimg/prologue/splash.png";

            var seqAnimation = PFunc.createSequentialAnimation(imgWrapper);
            var aniFIn = PFunc.createPropertyAnimation(seqAnimation, 0, 1, image, "opacity", 2000);

            seqAnimation.start();
        }

}

To copy to clipboard, switch view to plain text mode 

JS (PFunc.js):

function createImage(parent) {
    var image =  Qt.createQmlObject("import QtQuick 2.2; Image {anchors.fill: parent; }", parent);
    return image;
}
 
function createSequentialAnimation(parent) {
    var animation = Qt.createQmlObject("import QtQuick 2.2; SequentialAnimation {}", parent);
    return animation;
}
 
function createPropertyAnimation(parent, from, to, target, prop, duration) {
    var animation = Qt.createQmlObject("import QtQuick 2.2; PropertyAnimation {}", parent);
    animation.from = from;
    animation.to = to;
    animation.target = target;
    animation.property = prop;
    animation.duration = duration;
    return animation;
}

function createImage(parent) {
    var image =  Qt.createQmlObject("import QtQuick 2.2; Image {anchors.fill: parent; }", parent);
    return image;
}

function createSequentialAnimation(parent) {
    var animation = Qt.createQmlObject("import QtQuick 2.2; SequentialAnimation {}", parent);
    return animation;
}

function createPropertyAnimation(parent, from, to, target, prop, duration) {
    var animation = Qt.createQmlObject("import QtQuick 2.2; PropertyAnimation {}", parent);
    animation.from = from;
    animation.to = to;
    animation.target = target;
    animation.property = prop;
    animation.duration = duration;
    return animation;
}

To copy to clipboard, switch view to plain text mode 

Note that dynamically created image was showing correctly.

Platform:
Win 8.1 Qt 5.3.1 MinGW 4.8.2 32bit

Any ideas? Am I missing anything?

Thanks.

[anda_skoa]

Maybe it is garbage collected?
Try keeping the animation in a property.

Have you tried just creating the property animation? I.e. without the sequential animation?

Cheers,
_

[hmasterwang]

Maybe it is garbage collected?
Try keeping the animation in a property.

Have you tried just creating the property animation? I.e. without the sequential animation?

Cheers,
_

Well I'm sure it's not garbage collected. I've seen those animations hanging in their parents in debug view when going out of the scope.

I can animate a single PropertyAnimation. That works fine. Even if it is added to the SequentialAnimation

[anda_skoa]

So is the problem that the sequential animation is not starting the property animation or does the sequential animation not run itself?
I.e. does the sequential animation emit its started() and stopped() signals?

Cheers,
_

[hmasterwang]

So is the problem that the sequential animation is not starting the property animation or does the sequential animation not run itself?
I.e. does the sequential animation emit its started() and stopped() signals?

Cheers,
_

started() and stopped() are emitted, but what's interesting is that the order looks weird. First a stopped() is emitted, then a stopped() is emitted again, and last a started() is emitted. It happeded almost at the same time.

[anda_skoa]

So it could be that the sequential animation does not know about the property animation.

Can you try adding the property animation to the sequential animation's "animations" property?

Probably something like

var animations = [];
animations.push(animation);
parent.animations = animations;

var animations = [];
animations.push(animation);
parent.animations = animations;

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[hmasterwang]

So it could be that the sequential animation does not know about the property animation.

Can you try adding the property animation to the sequential animation's "animations" property?

Probably something like

var animations = [];
animations.push(animation);
parent.animations = animations;

var animations = [];
animations.push(animation);
parent.animations = animations;

To copy to clipboard, switch view to plain text mode 

Cheers,
_

Works like a charm! Thanks

[wysota]

Why not use a component instead of the problematic JS code?

[hmasterwang]

Why not use a component instead of the problematic JS code?

Written here

I am trying to create and set animations dynamically.

[wysota]

Written here

Well... that doesn't answer my question as components are meant to do exactly that -- create objects dynamically.

Component {
  id: animCompo
 
  SequentialAnimation {
    // ...
  }
}
 
//...
var obj = animCompo.createObject(parent, {prop1: val1, prop2: val2, ...})

Component {
  id: animCompo

  SequentialAnimation {
    // ...
  }
}

//...
var obj = animCompo.createObject(parent, {prop1: val1, prop2: val2, ...})

To copy to clipboard, switch view to plain text mode 

You can probably even use a Repeater in the component to get those property animations inside.