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

介绍

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


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

Github

在Github上已收获近35k的star数,可见其非常受广大使用者的热爱!

https://github.com/juliangarnier/anime/

特性

  • 复杂的交错动画变得简单
Github非常惊艳的轻量级开源动画引擎——Animejs
  • css分层转换

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

Github非常惊艳的轻量级开源动画引擎——Animejs
  • 控件和回调

时间就是一切

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

使用完整的内置回调和控件功能同步播放,暂停,控制,倒退和触发事件。

  • 动画任何东西

HTML,JS,CSS,SVG

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

安装使用

 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

  • 文字动画
Github非常惊艳的轻量级开源动画引擎——Animejs
<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  });
  • 块状动画
Github非常惊艳的轻量级开源动画引擎——Animejs
  • 徽标动画
Github非常惊艳的轻量级开源动画引擎——Animejs
  • 球状动画
Github非常惊艳的轻量级开源动画引擎——Animejs

总结

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

版权声明:飞鱼 发表于 2020-07-19 11:08:54。
转载请注明:Github非常惊艳的轻量级开源动画引擎——Animejs | HelloWorld.La

暂无评论

暂无评论...