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