Search code examples
javascriptanimationkineticjs

Kinetic.Tween fail to fade a text with opacity


I try to make a text fading with kineticjs using Tweens, I succefully made a text moving with them, but the text don't seems to fade.

So it could be great if someone explain me what I'm doing wrong

Here is a jsfiddle, the opacity should be at 0.1 when the alert 'tween finished' show up, but opacity didn't moved.

 var stage = new Kinetic.Stage({
            container : 'contain',
            width: $('#contain').width(),
            height : $('#container').height(),
    });
var layer = new Kinetic.Layer();
    //Fade the text in, then fade it out.
    var textBegin = new Kinetic.Text({
            text : 'Text to fade',
            fill : '#00CCFF',
            fontSize : 45,
            x : stage.width()/2,
            y : stage.height()/2,
            opacity : 1,
    });
    textBegin.offsetX(textBegin.width()/2);
    textBegin.offsetY(textBegin.height()/2);
    var tweenIn = new Kinetic.Tween({
            node : textBegin,
            opacity : 0.1,
            duration : 1,
            easing : Kinetic.Easings.Linear,
            onFinish : function(){
                    alert('tween finished');
            }
    });
    var tweenOut = new Kinetic.Tween({
            node : textBegin,
            opacity: 0,
            duration : 1,
    });
    layer.add(textBegin);
    stage.add(layer);
    //setTimeout(textBegin.tweenOut.play, 1200);
    tweenIn.play();

EDIT: Tried to change the property of the tween and it doesn't work either...


Solution

  • Create Tween AFTER adding shape to layer.

    http://jsfiddle.net/z26tgnkd/6/