TweenJS模块

TweenJS模块

官网链接

TweenJS Javascript库提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性,并允许您链接补间动画和行动结合起来,创造出复杂的序列。

 

简单的补间动画

这个渐变将渐变目标alpha属性用一秒从0渐变到1,然后调用handleComplete函数。

 

    target.alpha = 0;
    createjs.Tween.get(target).to({alpha:1}, 1000).call(handleComplete);
    function handleComplete() {
        //渐变完成执行
    }

参数和范围 Tween总是提供一个call()伴随着参数和/或一个范围。如果没有传递范围,那么称为匿名函数(正常JavaScript行为)。 在面向对象的风格发展，范围是有用的维护范围。

 createjs.Tween.get(target).to({alpha:0})
     .call(handleComplete, [argument1, argument2], this);

 

可链式编程的补间动画

这个渐变将会先等待0.5秒，渐变目标的alpha属性从0到1，并且visible属性从true变为false，这个过程用时1秒，最后调用handleComplete函数。

 

    target.alpha = 1;
    createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 1000).call(handleComplete);
    function handleComplete() {
        //渐变完成执行
    }

 

浏览器支持

TweenJS会在现代浏览器工作。TweenJS在IE8或者更早的版本上,使用一个旧版本的PreloadJS(0.4.1和更早的版本)。