Liike 一个用于创建渐变动画的微型JS库
Liike 一个用于创建渐变动画的微型JS库
JavaScript 动画效果
共175Star
详细介绍
Liike
Liike is a Finnish word and means movement, motion. It's a minimalistic library to create performant custom JS tweens no matter what you're tweening.
When you create a tween, Liike will create a single render loop on-demand for every tweens running and use DOMHighResTimeStamp
(provided by requestAnimationFrame
), which should be accurate to 5 µs. If the delay
is 0
, Liike will start the tween at the next animation frame and count the duration from there.
Example
Install
npm i liike
- ES6 module production: https://liike.js.org/liike.es.min.js (~2.5 KB)
- ES6 module development: https://liike.js.org/liike.es.js (~5 KB)
- UMD production: https://liike.js.org/liike.min.js (~2.5 KB)
- UMD development: https://liike.js.org/liike.js (~5 KB)
Usage
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
}
});
Tween settings
- delay: After how many milliseconds the tween will start
- duration: How many milliseconds the tween will last
- easing: Check available easing functions below
- from: Values to start from
- to: Values to tween to
- onstart: Callback for tween start
onstart(target)
- onprogress: Callback for progress
onprogress(target, t)
- onend: Callback for tween end
onend(target)
Available easings
- 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
Browser support
- IE 10 and newer (IE 9 and older will need polyfill for
requestAnimationFrame
)