【问题标题】:Kinetic.Tween fail to fade a text with opacityKinetic.Tween 无法淡化不透明的文本
【发布时间】:2014-09-02 12:15:50
【问题描述】:

我尝试使用 Tweens 使用 kineticjs 使文本褪色,我成功地使文本与它们一起移动,但文本似乎没有褪色。

所以如果有人解释我做错了什么会很棒

这是一个jsfiddle,当出现“补间完成”警报时,不透明度应该为 0.1,但不透明度没有移动。

 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();

编辑:试图改变补间的属性,它也不起作用......

【问题讨论】:

    标签: javascript animation kineticjs


    【解决方案1】:

    在向图层添加形状后创建Tween

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-03-27
      • 2015-08-12
      • 1970-01-01
      • 1970-01-01
      • 2012-02-25
      • 2021-11-15
      • 2018-10-16
      相关资源
      最近更新 更多