Tween.js使用教程
中文README
中文指南

引入

CDN引入或者 NPM引入

例子

点击页面回到顶部

document.onclick=function(){
  // 设置循环动画
function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}
requestAnimationFrame(animate);
var position = { x: 0, y: pageYOffset }; // 起始点
var tween = new TWEEN.Tween(position) // 创建一个新的tween用来改变 'position'
        .to({ x: 0, y: 0 }, 1000) // 在1s内移动至 (0, 0)
        .easing(TWEEN.Easing.Quadratic.Out) // 使用缓动功能使的动画更加平滑
        .onUpdate(function() { // 在 tween.js 更新 'position' 后调用
        // 移动到 'position' 所描述的位置，配合 CSS 过渡
            window.scrollTo(position.x,position.y)
        });
        .start(); // 执行tween
};

【点击查看在线例子】

缓动动画

公式：.easing(TWEEN.Easing.缓动函数.缓动方式)

缓动函数

各种缓动效果曲线图
 缓动效果源码
缓动函数：

Linear：线性匀速运动
Quadratic：二次方缓动
Cubic：三次方缓动
Quartic：四次方缓动
Quinitic：五次方缓动
Sinusoidal：正弦曲线的缓动
Exponential：指数曲线的缓动
Circular：圆形曲线的缓动
Elastic：指数衰减的正弦曲线的缓动
Back：超过范围的三次方的缓动
Bounce：指数衰减的反弹缓动

缓动方式(easing类型)

In：加速，嫌慢后壳
Out：减速，先快后慢
InOut：前半段加速，后半段减速

es6-tween

es6-tween主页

var box = document.createElement('div');
box.style.setProperty('background-color', '#008800');
box.style.setProperty('width', '100px');
box.style.setProperty('height', '100px');
document.body.appendChild(box);
TWEEN.autoPlay(true);
// Setup the animation loop.
let coords = {x: 0,y: 0};
let tween = new TWEEN.Tween(coords)
  .to({x: 100,y: 400}, 1000)
  .easing(TWEEN.Easing.Bounce.In)
  .on('update', ({x, y}) => {
    box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`);
  })
  .start();

【点击查看在线例子】

repeat和yoyo实现循环往复

文档:repeat和yoyo

【点击查看在线例子】

滚动到顶部的其他库

animated-scroll-to
moveto