Anime.js 是一个快速、多用途且轻量的 JavaScript 动画库，拥有简单但强大的 API。
它可以用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。

使用方法

Anime.js V4 通过引入 ES modules 的方式使用：

javascript import { animate, stagger, } from 'animejs'; animate('.square', { x: 320, rotate: { from: -180 }, duration: 1250, delay: stagger(65, { from: 'center' }), ease: 'inOutQuint', loop: true, alternate: true }); Anime.js 代码示例

V4 文档

完整英文文档请查看 这里。

NPM 开发脚本

首先运行 npm i 来安装所有必要的依赖包。
然后通过 npm run <script> 执行以下脚本。

script 功能
dev 监听 src/ 中的改动并将 esm 版本编译到 lib/anime.esm.js
dev-types 和 dev 一样，但还会运行 TypeScript 并生成 types/index.d.ts 文件
build 生成类型定义并将 ESM / UMD / IIFE 版本编译到 lib/
test-browser 启动本地服务器并运行所有浏览器相关的测试
test-node 运行所有 Node 相关的测试
open-examples 启动本地服务器以便本地浏览示例

V4 API 不兼容变更概览

动画

  1. - import anime from 'animejs';
  2. + import { animate, createSpring, utils } from 'animejs';
  4. - anime({
  5. -   targets: 'div',
  6. + animate('div', {
  7.     translateX: 100,
  8.       rotate: {
  9. -     value: 360,
  10. +     to: 360,
  11. -     easing: 'spring(.7, 80, 10, .5)',
  12. +     ease: createSpring({ mass: .7, damping: 80, stiffness: 10, velocity: .5}),
  13.     },
  14. -   easing: 'easeinOutExpo',
  15. +   ease: 'inOutExpo',
  16. -   easing: () => t => Math.cos(t),
  17. +   ease: t => Math.cos(t),
  18. -   direction: 'reverse',
  19. +   reversed: true,
  20. -   direction: 'alternate',
  21. +   alternate: true,
  22. -   loop: 1,
  23. +   loop: 0,
  24. -   round: 100,
  25. +   modifier: utils.round(2),
  26. -   begin: () => {},
  27. +   onBegin: () => {},
  28. -   update: () => {},
  29. +   onUpdate: () => {},
  30. -   change: () => {},
  31. +   onRender: () => {},
  32. -   changeBegin: () => {},
  33. -   changeComplete: () => {},
  34. -   loopBegin: () => {},
  35. -   loopComplete: () => {},
  36. +   onLoop: () => {},
  37. -   complete: () => {},
  38. +   onComplete: () => {},
  39.   });

Promise

  1. - import anime from 'animejs';
  2. + import { animate, utils } from 'animejs';
  4. - anime({ targets: target, prop: x }).finished.then(() => {});
  5. + animate(target, { prop: x }).then(() => {});

定时器

  1. - import anime from 'animejs';
  2. + import { createTimer } from 'animejs';
  4. - anime({
  5. + createTimer({
  6. -   duration: Infinity,
  7. -   update: () => {},
  8. +   onUpdate: () => {},
  9.   });

时间轴

  1. - import anime from 'animejs';
  2. + import { createTimeline, stagger } from 'animejs';
  4. - anime.timeline({
  5. + createTimeline({
  6. -   duration: 500,
  7. -   easing: 'easeInOutQuad',
  8. +   defaults: {
  9. +     duration: 500,
  10. +     ease: 'inOutQuad',
  11. +   }
  12. -   loop: 2,
  13. +   loop: 1,
  14. - }).add({
  15. -   targets: 'div',
  16. + }).add('div', {
  17.     rotate: 90,
  18.   })
  19. - .add('.target:nth-child(1)', { opacity: 0, onComplete }, 0)
  20. - .add('.target:nth-child(2)', { opacity: 0, onComplete }, 100)
  21. - .add('.target:nth-child(3)', { opacity: 0, onComplete }, 200)
  22. - .add('.target:nth-child(4)', { opacity: 0, onComplete }, 300)
  23. + .add('.target', { opacity: 0, onComplete }, stagger(100))

stagger（错位动画）

  1. - import anime from 'animejs';
  2. + import { animate, stagger } from 'animejs';
  4. - anime({
  5. -   targets: 'div',
  6. + animate('div', {
  7. -   translateX: anime.stagger(100),
  8. +   translateX: stagger(100),
  9. -   delay: anime.stagger(100, { direction: 'reversed' }),
  10. +   translateX: stagger(100, { reversed: true }),
  11.   });

SVG

  1. - import anime from 'animejs';
  2. + import { animate, svg } from 'animejs';
  4. - const path = anime.path('path');
  5. + const { x, y, angle } = svg.createMotionPath('path');
  7. - anime({
  8. -   targets: '#shape1',
  9. + animate('#shape1', {
  10. -   points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369',
  11. +   points: svg.morphTo('#shape2'),
  12. -   strokeDashoffset: [anime.setDashoffset, 0],
  13. +   strokeDashoffset: svg.drawLine(),
  14. -   translateX: path('x'),
  15. -   translateY: path('y'),
  16. -   rotate: path('angle'),
  17. +   translateX: x,
  18. +   translateY: y,
  19. +   rotate: angle,
  20.   });

工具函数（Utils）

  1. - import anime from 'animejs';
  2. + import { utils } from 'animejs';
  4. - const value = anime.get('#target1', 'translateX');
  5. + const value = utils.get('#target1', 'translateX');
  7. - anime.set('#target1', { translateX: 100 });
  8. + utils.set('#target1', { translateX: 100 });
  10. - anime.remove('#target1');
  11. + utils.remove('#target1');
  13. - const rounded = anime.round(value);
  14. + const rounded = utils.round(value, 0);

引擎

  1. - import anime from 'animejs';
  2. + import { engine } from 'animejs';
  4. - anime.suspendWhenDocumentHidden = false;
  5. + engine.pauseWhenHidden = false;
  7. - anime.speed = .5;
  8. + engine.playbackRate = .5;