最小的js过渡动画库Liike.js

Liike.js是一款最小的js过渡动画库。Liike.js可以为任何元素制作平滑的过渡动画，并且内置有多种easing过渡动画效果。

Liike.js支持IE10+浏览器，IE9及以下的IE浏览器需要添加requestAnimationFrame文件。

安装

可以通过npm来安装Liike.js插件。

npm i liike                  
                

使用方法

import liike from 'liike';

/**
 * Define how Liike should animate based on the tweened values
 * @param {Element} The element you're tweening
 * @param {Object} Tween settings
 */
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
  }
});
                

配置参数

Liike.js插件的配置参数说明如下：

• delay：多少毫秒延迟后开始过渡动画。
• duration：过渡动画的持续时间。
• easing：过渡动画的easing函数。
• from：过渡动画开始值。
• to：过渡动画的结束值。
• onstart：过渡动画开始后的回调函数。onstart(target)
• onprogress：过渡动画过程中的回调函数。onprogress(target, t)
• onend：过渡动画结束后的回调函数。onend(target)

可用的easing函数

• 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

Liike.js过渡动画库的github地址为：https://github.com/LiikeJS/Liike

相关插件

8种基于WebGL的图片过渡动画特效

纯CSS3杂志翻页动画特效

CSS3鼠标悬停图片模糊过渡动画特效

基于TweenMax的炫酷页面切换动画特效