html动画引擎,Github非常惊艳的轻量级开源动画引擎——Animejs

介绍

Anime.js是一个轻量级的JavaScript动画库，具有简单但功能强大的API。它与CSS属性，SVG，DOM属性和JavaScript对象一起使用。

Github

在Github上已收获近35k的star数，可见其非常受广大使用者的热爱！https://github.com/juliangarnier/anime/

特性复杂的交错动画变得简单

css分层转换

在单个HTML元素上同时以不同的时间对多个CSS变换属性进行动画处理。

控件和回调

时间就是一切

使用完整的内置回调和控件功能同步播放，暂停，控制，倒退和触发事件。动画任何东西

HTML，JS，CSS，SVG

安装使用npm install animejs --save

ES6：import anime from 'animejs/lib/anime.es.js';

CommonJS：const anime = require('animejs');anime({

targets: 'div',

translateX: 250,

rotate: '1turn',

backgroundColor: '#FFF',

duration: 800

});

Demo文字动画

THURSDAY

.ml1 {

font-weight: 900;

font-size: 3.5em;

}

.ml1 .letter {

display: inline-block;

line-height: 1em;

}

.ml1 .text-wrapper {

position: relative;

display: inline-block;

padding-top: 0.1em;

padding-right: 0.05em;

padding-bottom: 0.15em;

}

.ml1 .line {

opacity: 0;

position: absolute;

left: 0;

height: 3px;

width: 100%;

background-color: #fff;

transform-origin: 0 0;

}

.ml1 .line1 { top: 0; }

.ml1 .line2 { bottom: 0; }var textWrapper = document.querySelector('.ml1 .letters');

textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "$&");

anime.timeline({loop: true})

.add({

targets: '.ml1 .letter',

scale: [0.3,1],

opacity: [0,1],

translateZ: 0,

easing: "easeOutExpo",

duration: 600,

delay: (el, i) => 70 * (i+1)

}).add({

targets: '.ml1 .line',

scaleX: [0,1],

opacity: [0.5,1],

easing: "easeOutExpo",

duration: 700,

offset: '-=875',

delay: (el, i, l) => 80 * (l - i)

}).add({

targets: '.ml1',

opacity: 0,

duration: 1000,

easing: "easeOutExpo",

delay: 1000

});块状动画

徽标动画

球状动画

总结

anime是一个非常值得使用的动画引擎，它足够简单，足够满足需求，足够的轻量，足够的惊艳！enjoy it！