0
点赞
收藏
分享

微信扫一扫

补间动画插件-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​​



举报

相关推荐

0 条评论