建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

补间动画库tweenjs

来源:易助科技浏览量:14收藏

简介


tweenjs 是使用 JavaScript 中的一个简单的补间动画库,支持数字、对象的属性和 CSS 样式属性的赋值。

tweenjs 以平滑的方式修改元素的属性值,需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间(duration),之后 tween 引擎就可以计算从开始动画点到结束动画点之间值,从而产生平滑的动画效果。


补间动画库tweenjs-示例图


使用


将附件中下载的 tween.js 文件引入到需要使用动画的页面即可。


调用


var box = document.createElement('div');
box.style.setProperty('background-color', '#008800');
box.style.setProperty('width', '200px');
box.style.setProperty('height', '200px');
document.body.appendChild(box); 
function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time);
}
requestAnimationFrame(animate);
var coords = { x: 0, y: 0 };
var tween = new TWEEN.Tween(coords)
            .to({ x: 300, y: 200 }, 1000)
            .easing(TWEEN.Easing.Quadratic.Out)
            .onUpdate(function() { 
              box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)');
            })
            .start();


说明:

1. 设置对象的初始位置:


var coords = { x: 0, y: 0 };


2. 设置对象的新位置,持续时间为 1s:


var tween = new TWEEN.Tween(coords) .to({ x: 300, y: 200 }, 1000)


3. 启动动画:


 tween.start();


4.  为了平滑的动画效果,需要在同一个循环动画中调用 TWEEN.update 方法:


animate();
function animate(){
    requestAnimationFrame(animate);
    TWEEN.update();
}


tweenjs 动画说明


Tween.js 本身不会运行,你需要通过 update 方法明确告诉它什么时候开始运行,推荐在动画主循环中使用该动画,可以调用 requestAnimationFrame 方法来获得良好的图像性能使用无参数的调用方法,update 将明确当前时间。也可以为 update 方法法明确一个时间。


TWEEN.update(100);


update 的时间为 100毫秒 ,可以使用这种方法来明确代码中所有随时间变化的函数。


动画控制


1.    start 和 stop ==> Tween.start 和 Tween.stop 分别用来控制 tween 动画的开始和结束。对于已经结束和没有开始的动画,Tween.stop 方法不起作用。 Tween.start 可以方法接收一个时间参数,若使用了该参数,tween 动画将在延迟该时间数后才开始动画,否则他将立刻开始动画。
2.  update ==> 通过 TWEEN.update 方法执行动画的更新。


3.  chain ==> 制作多个多行,例如一个动画在另一个动画结束后开始,可以通过 chain 来实现:
tweenA.chain(tweenB);  //tweenB 在 tweenA 之后开始动画,故可以制作一个无线循环的动画
tweenB.chain(tweenA);
4.  repeat ==> 制作循环动画,优于 chain,接收一个用于描述循环次数的参数:
tween.repeat(10);
tween.repeat(infinity);
5.  delay ==> 用于控制动画之间的延迟:
tween.delay(1000);
tween.start()



相关链接


官网地址 :  https://createjs.com/

中文文档 :  http://www.hzhcontrols.com/new-1441744.html

GitHub 地址 :  https://github.com/CreateJS/TweenJS