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.
Bookmarks