Anime.js - 轻量级JavaScript动画库

项目描述

Anime.js 是一个轻量级但功能强大的 JavaScript 动画库，具有以下特点：

• 支持 CSS 属性、SVG、DOM 属性和 JavaScript 对象的动画
• 简单易用的 API 设计
• 高性能动画渲染
• 丰富的缓动函数和动画控制选项
• 支持时间轴和复杂动画序列

项目采用 MIT 许可证，当前版本为 v4.0.2。

功能特性

• 多目标支持：可以同时动画化多个目标元素
• 丰富的时间控制：支持延迟、持续时间、循环等参数
• 高级缓动函数：内置多种缓动效果，支持自定义贝塞尔曲线
• 动画组合：支持替换、混合等动画组合方式
• 响应式设计：适配不同设备和屏幕尺寸
• SVG 支持：完整支持 SVG 元素的动画
• 时间轴功能：可以创建复杂的动画序列
• 滚动触发：支持基于滚动位置的动画
• 物理动画：提供弹簧动画效果

安装指南

NPM 安装

npm install animejs

CDN 引入

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

ES Module 导入

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;

更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）
公众号二维码