非常驚豔的輕量級開源動畫引擎——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');

<script src="anime.min.js"></script>

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

Demo

• 文字動畫

 

<h1 class="ml1">
  <span class="text-wrapper">
    <span class="line line1"></span>
    <span class="letters">THURSDAY</span>
    <span class="line line2"></span>
  </span>
</h1>

.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, "<span class='letter'>$&</span>");

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！