其他分享
首页 > 其他分享> > 补间动画插件-tween.js

补间动画插件-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和更早的版本)。

 

这个模块提供了以下类:

 

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