tweenjs 是使用 JavaScript 中的一个简单的补间动画库,支持数字、对象的属性和 CSS 样式属性的赋值。
tweenjs 以平滑的方式修改元素的属性值,需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间(duration),之后 tween 引擎就可以计算从开始动画点到结束动画点之间值,从而产生平滑的动画效果。
![]() |
---|
将附件中下载的 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