Anime.js - 轻量级 JavaScript 动画库

npm install animejs

<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.min.js"></script>

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});

const timeline = createTimeline();
timeline.add({  targets: '.element',  translateX: 250,  duration: 1000}).add({  targets: '.another-element',  translateY: 100,  duration: 500});
timeline.play();

const spring = createSpring({  mass: 1,  stiffness: 100,  damping: 10,  velocity: 0});
animate('.ball', {  translateY: 100,  easing: spring.ease});

export class Engine extends Clock {  constructor(initTime) {    super(initTime);    this.useDefaultMainLoop = true;    this.pauseOnDocumentHidden = true;    this.defaults = defaults;    this.paused = isBrowser && doc.hidden ? true  : false;    this.reqId = null;  }
  update() {    const time = this._currentTime = now();    if (this.requestTick(time)) {      this.computeDeltaTime(time);      const engineSpeed = this._speed;      const engineFps = this._fps;      let activeTickable = this._head;      while (activeTickable) {        const nextTickable = activeTickable._next;        if (!activeTickable.paused) {          tick(            activeTickable,            (time - activeTickable._startTime) * activeTickable._speed * engineSpeed,            0,            0,            activeTickable._fps < engineFps ? activeTickable.requestTick(time) : tickModes.AUTO          );        }        activeTickable = nextTickable;      }      additive.update();    }  }}

export const convertColorStringValuesToRgbaArray = colorString => {  return isRgb(colorString) ? rgbToRgba(colorString) :         isHex(colorString) ? hexToRgba(colorString) :         isHsl(colorString) ? hslToRgba(colorString) :         [0, 0, 0, 1];}
const rgbToRgba = rgbValue => {  const rgba = rgbExecRgx.exec(rgbValue) || rgbaExecRgx.exec(rgbValue);  const a = !isUnd(rgba[4]) ? +rgba[4] : 1;  return [    +rgba[1],    +rgba[2],    +rgba[3],    a  ]}

export const cubicBezier = (mX1 = 0.5, mY1 = 0.0, mX2 = 0.5, mY2 = 1.0) =>   (mX1 === mY1 && mX2 === mY2) ? none :  t => t === 0 || t === 1 ? t :  calcBezier(binarySubdivide(t, mX1, mX2), mY1, mY2);
const calcBezier = (aT, aA1, aA2) =>   (((1 - 3 * aA2 + 3 * aA1) * aT + (3 * aA2 - 6 * aA1)) * aT + (3 * aA1)) * aT;