Liike – 一个微型 JavaScript 补间动画库

Liike 是一个芬兰语，意思是运动，动效。它是一个微型的 JavaScript 库，可让你创建高性能的自定义 JS 补间动画（tweening）。

当你创建一个补间（tween）时，Liike 将为每个补间元素（tweens）运行并使用 DOMHighResTimeStamp（由 requestAnimationFrame 提供）按需创建一个单独的渲染循环，这精确到 5μs 。如果延迟为 0 ，Liike 将在下一帧开始补间动画，并计算从那里开始的持续时间。

安装

npm i liike

• ES6 生产版: https://liike.js.org/liike.es.min.js (~2.5 KB)
• ES6 开发版: https://liike.js.org/liike.es.js (~5 KB)
• UMD 生产版: https://liike.js.org/liike.min.js (~2.5 KB)
• UMD 开发版: https://liike.js.org/liike.js (~5 KB)

用法

import liike from 'liike';

/**
 * 根据补间的值来定义 Liike 应该如何动画
 * @param {Element} 补间的元素
 * @param {Object} 补间设置
 */
const transform = (target, data) => {
  const { x = 0, y = 0, opacity = 1 } = data;

  target.style.transform = `translate(${x}px, ${y}px)`;
  target.style.opacity = opacity;
};

const tween = liike(transform);

const $hello = document.getElementById('hello');

tween($hello, {
  delay: 0,
  duration: 1000,
  easing: 'bounceOut',
  from: {
    y: -100,
    opacity: 0
  },
  to: {
    opacity: 1
  }
});

补间设置

• delay: 在多少毫秒之后开始补间动画
• duration: 补间动画持续几毫秒
• easing: 检查可用的缓动函数 见下文
• from: 开始的值
• to: 到补间的值
• onstart: 补间开始时回调 onstart(target)
• onprogress: 回调进度 onprogress(target, t)
• onend: 补间结束时回调 onend(target)

可用的缓动

• linear
• quadIn, quadOut, quadInOut (power to 2)
• cubicIn, cubicOut, cubicInOut (power to 3)
• quartIn, quartOut, quartInOut (power to 4)
• quintIn, quintOut, quintInOut (power to 5)
• sineIn, sineOut, sineInOut
• bounceIn, bounceOut, bounceInOut

浏览器支持

支持所有现代浏览器以及 IE 10 和更新版本（IE 9及更早版本将需要 polyfill 来支持 requestAnimationFrame ）