Anime.js - 轻量级JavaScript动画库

原创

qife122

发布于 2025-07-28 09:27:52

3180

文章被收录于专栏：网络安全技术点滴分享网络安全技术点滴分享

项目描述

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;

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

计算机