补间动画插件-tween.js

TweenJS类库主要用来调整和动画HTML5和Javascript属性，提供了简单并且强大的tweening接口。

TweenJS是使用JavaScript中的一个简单的补间动画库。它的开发与EaselJS库很好的整合，但不依赖于或特定于它。 它支持数字对象的属性和CSS样式属性赋值。

API很简单但很强大，因此很容易通过链接命令创建复杂的项目。

TweenJS模块

定义于: TweenJS:9

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和更早的版本)。

 

这个模块提供了以下类:

• CSSPlugin
• Ease
• MotionGuidePlugin
• SamplePlugin
• Timeline
• Tween
• TweenJS

 

标签：handleComplete,插件,动画,渐变,TweenJS,tween,alpha,补间,属性
来源： https://blog.51cto.com/u_11641800/3034273