Random ideas about grouping js animations

[Adenilson Cavalcanti]

Dear Friends

The purpose of this message is to discuss some ideas and ask for input of plasma developers concerning how to group javascript animations (jsanims).

IIRC, last month a new factory of animations landed in trunk: Plasma::Animation Animator::create(const QString &animationName, QObject *parent = 0);

What it does is quite nifty: it allows to specify an animation type by name and let the theme to load an external js code that defines it. The motivation for this plus some benchmarks can be found in my blog (but in short we can have themable animations plus write new animations in javascript without noticeable execution speed changes).

But an important feature is missing: allow a js animation to define itself as group of other animations (being C++ or js).

Today is possible to create (n*jsanim) objects and group them in a QAnimationGroup (being linear or parallel). I tested this in C++, but I assume that the bindings for animation groups in js should work as well. 

What is missing is to add that bindings in the QScriptEngine singleton used by JavascriptAnimation class. So, grouping should be easily achievable (... famous last words...) in js client side.

Last week I was thinking about how to solve the remaining part of the puzzle (i.e. allow an jsanim to define itself by grouping other animation objects) and came with the following self excluding approaches:

a) jsanim 'class' access the 'updateCurrentTime' function of other objects while running the animation loop. So looking at an jsanim example:

function ZoomAnimation(target, duration) {
    this.target = target;
    this.duration = duration;

    this.updateCurrentTime = function(currentTime) {

	var delta = currentTime/this.duration;
	this.target.scale = delta;

    }
}


The composed new jsanim 'class' would require to access the plasma animation factory and set as an attribute of itself 'n' instances of other animations. Then in the 'updateCurrentTime', it would explicitly call each animation instance 'updateCurrentTime' method. E.g

function AppearAnimation(target, duration) {
    this.target = target;
    this.duration = duration;
    //We need to have the factory exported to the QScriptEngine!
    this.zoom = new ZoomAnimation(target)
    this.pulse = new PulseAnimation(target)
}


The advantage here is that we have fine control over the execution of the composed animation, but having linear X parallel behavior would require some extra logic (mostly check for the elapsed time and decide to call or not the 'updateCurrentTime' of the internal animations). To make this clearer, here it goes some pseudocode (I hope that indentation will not break when I click 'send' the message...)

//Linear
    this.updateCurrentTime = function(currentTime) {

	var delta = currentTime/this.duration;
        //First execute zoom
	if (currentTime < 100)
              this.zoom.updateCurrentTime(delta)
        else //Later the pulse for the remaining time
              this.pulse.updateCurrentTime(delta)

    }

//Parallel
    this.updateCurrentTime = function(currentTime) {

	var delta = currentTime/this.duration;
        //Execute both at 'same' time
        this.zoom.updateCurrentTime(delta)
        this.pulse.updateCurrentTime(delta)

    }

Of course, guaranteeing that rewinding the animation will result into something that actually makes sense might require some extra logic for some animations (as we have in some of the C++ ones).

Ok, so let's move on to the next alternative


b) jsanim is just an animation group: and in its creation, it sets as a self attribute an animation group instance with the other objects that it wants to use. I can see that this might work, but honestly, I'm not very attracted to this approach and will not detail how it could be implemented...


So, what you guys think about this subject? Please feel free to send another proposals for addressing the issue (more alternatives are always good).


Best regards


Adenilson Cavalcanti
a.k.a. Savago