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.