Tween layers, make a transition animation between 2 layers one transforming into the other

[melanke]

Tween layers, make a transition animation between 2 layers one transforming into the other.

Maybe using the existing method toggleLayers but with duration in ms

[melanke]

is blocked by issues #8 and #9, they need to be implemented first

[melanke]

• copy the first layer temporarily with a strange name: "CCTemp-firstlayername-secondlayername";
• make the first layer hidden;
• loop with "enterframe" event changing the temporary layer state until it became similar to the second layer; (the duration of the loop will be specified by the user)

//without animation:
CC("#ElementId").toggleLayers("firstlayername", "secondlayername");

//with animation
CC("#ElementId").toggleLayers("firstlayername", "secondlayername", 2000);
//2000 will be miliseconds or steps?

[melanke]

//would be cool if we could declare an animation implementation
var animationFunction = CC.animation(function(step, other, params) {
    //change the subject of the animation

    if (step >= other) {
        return true; //will finish the animation
    } else {
        return false; //will iterate again
    }
});

//and them use it
animationFunction(other, params).then(function(){

});

//and a kind of animation that can be used with any duration
var animationFunction2 = CC.percentageAnimation(function(percentage, other, params) {
    //change the subject of the animation in the state of the animation relative to the percentage
});

//using it
animationFunction2(500, other, params).then(function(){

});
//500 steps or 500 miliseconds

//and the toggleLayers with duration will use an CC default animation

[melanke]

instant call

CC.animation(function(step){

}, true).then(function(){

});

//and

CC.percentageAnimation(function(percentage){

}, 500).then(function(){

});

[melanke]

I believe this is a better interface:

var animSpec1, animSpec2, animSpec3;

//the animationSpec is a function that receives the percentage of the total duration
animSpec1 = function(pct, otherParams) {
    console.log(pct);
};

//but it may controll the duration itself, if it returns false will finish the animation
var animSpec4 = function(step, otherParams) {
    console.log(step);

    if (step > 400) {
        return false;
    }
};

//it is telling to execute 3 animations at the same time, in 500 steps, using the "easein" effect
var animation = new CC.Animation([animSpec1, animSpec2, animSpec3], 500, "easyin");

//it is telling to execute 2 animations at the same time, in 200 steps, using the "reverse-easeout" effect
var animation2 = new CC.Animation([animSpec3, animSpec1], 200, "reverse-easyout", {
    other: "params"
});

//it is telling to execute one animation until it stops by itself (the total animation will end when all animSpec ends)
var animation3 = new CC.Animation(animSpec4, {
    other: "params"
});

//we may chain the animations like this:

animation.then(function(){
    animation2.start();
});

animation2.then(function(){
    animation.start();
});

animation.start();

//OR like this:

//animationChain is an animation (the number is a delay)
var animationChain = CC.animationChain(animation, 2000, animation2, animation3);

animationChain.loop();

//animation:
//start: start an animation from the step zero
//then: register the callbacks when the animation ends
//pause: pause an animation where it is
//resume: resume an animation if it is paused
//loop: start and when it ends start again