JS 动画库介绍

在 HTML 中实现动画的机会有很多，例如网站交互和 UI 行为。许多人可能使用 CSS Transition 来实现 HTML 元素的简单动画。但在WebGL、Canvas、SVG等以JavaScript为主要实现的制作工作中，存在无法使用CSS Transition而需要动画库的情况。

JavaScript 动画库有很多种，因此很难决定使用哪一个。在本文中，我们将介绍 HTML JavaScript 库。

本次介绍的七个JS库

GSAP v3.12
Popmotion v11.0
Tween24.js v1.4
Anime.js v3.2.1
TweenJS (CreateJS) v1.0.0
jQuery v3.7.0
Velocity.js v1.5.2
Tween.js v21.0
Web Animations API

GSAP

gsap.to(".rect", {
  duration: 3, // 秒指定
  x: 700,
  rotate: 360,
  repeat: -1, 
  ease: Cubic.easeInOut 
});

虽然GSAP的容量有点大，为65KB，但是可以加载模块。
与其他库相比，与包管理器 npm 和 TypeScript 的使用也领先一步。

Popmotion

Popmotion是一个轻量级 JS 库，于 2015 年左右出现。
微信截图_20241213161249.png

其特点是API底层，JS库容量较小，只有15KB。缓动共有三种类型： easeIn、easeOut、。easeInOut提供的API并不多，需要自己控制DOM操作之类的东西，而且文档也不全面

const element = document.querySelector('.rect')

popmotion.animate({
  from: {
    x: 0,
    rotate: 0,
  },
  to: {
    x: 800,
    rotate: 360,
  },
  onUpdate(param) {
    element.style.transform = `translateX(${param.x}px) rotate(${param.rotate}deg)`;
  },
  duration: 3000, 
  repeat: Infinity, 
  ease: popmotion.easeInOut
});

Tween24.js

“ Tween24.js ”是一个补间库，其特点是使用方法链编写。许多动画库使用对象类型来指定属性，这往往需要大量输入，但通过方法链，您可以使用编辑器的代码完成功能顺利编写。

const target = document.querySelector(".rect");

Tween24.loop(0,
  Tween24.serial(
    Tween24.tween(target, 3, Ease24._3_CubicInOut)
      .x(700)
      .rotation(360),
    Tween24.prop(target)
      .x(0)
      .rotation(0)
  )
).play();

Tween24.js 为 103KB。还提供了包管理器 npm 和 TypeScript 的类型定义。

Anime.js - 轻量级且 API 丰富的库

Anime.js是一个2016年出现的JS库。其特点是可以通过简单的指定直观地指定动画。

anime({
  targets: ".rect",
  translateX: 800,
  rotate: 360,
  duration: 3000, 
  loop: true, 
  easing: "easeInOutCubic" 
});

它的并发执行性能不如GSAP和TweenJS，因此不适合移动很多对象。

TweenJS - 可以与 Adobe Animate CC 链接

TweenJS是 CreateJS 套件的一部分，也用于Adobe Animate CC的 HTML5 Canvas 导出。其吸引力在于，即使使用 Animate CC 的时间线创建的复杂补间也可以再现。一般动画库都会指定绝对时间，例如毫秒，但 TweenJS 不仅允许指定绝对时间，还可以指定帧数。它还支持帧速率变化，因此具有易于与 24fps 制作的动画同步的优点。

createjs.CSSPlugin.install();

createjs.Ticker.framerate = 60;

var element = document.querySelector(".rect");

element.style.left = "0px";
createjs.Tween.get(element, { loop: true }).to(
  { left: 800 },
  3000, // 时间
  createjs.Ease.cubicInOut // 运动类型
);

jQuery

jQuery.animate()具有动画功能。它很容易安装，因为只需加载 jQuery 即可使用，但不可能做任何复杂的事情，因为只有几种缓动（加速/减速）类型，并且几乎没有选项规范。位置、角度等transform没有捷径，也很不方便。

$(".rect")
  .css({ left: 0 }) 
  .animate(
    { left: 800 },
    3000, 
    "linear", 
    function() {
      tween();
    }
  );

Velocity.js - 替换 jQuery.animete

Velocity.js是一个库，也可以用作 jQuery 插件（它可以在没有 jQuery 的情况下使用）。animate()它取代了jQuery函数，比 jQuery 具有更好的性能和更多的功能。由于它解释 CSS 单元，因此对于控制 DOM 非常有用。

const element = document.querySelector(".rect"); 
Velocity(
  element,
  {
    translateX: 800,
    rotateZ: 360
  },
  {
    easing: "ease", 
    duration: 3000, 
    loop: true 
  }
);

Tween.js - 纯 JS 库

Tween.js与 TweenJS 名称相似，但它是一个不同的库。它的功能不多，特点是容量小。我们致力于简洁的设计，没有任何额外的功能。

不支持 CSS 单元自动完成，因此如果您尝试像下面的示例那样控制 HTML 元素，代码将会很复杂。它不适合 CSS，因此最好使用它来创建 WebGL 或 Canvas。

const element = document.querySelector(".rect"); 
const param = { x: 0, rotation: 0 }; // 

new TWEEN.Tween(param)
  .to({ x: 800, rotation: 360 }, 3000)
  .repeat(Infinity) // 
  .easing(TWEEN.Easing.Cubic.InOut) // 
  .onUpdate(function () { // 更新
    element.style.transform =
      `translateX(${param.x}px) rotate(${param.rotation}deg)`;
  })
  .start();

loop();

function loop() {
  requestAnimationFrame(loop);
  TWEEN.update();
}

Web Animations API - 原生动画API

Web Animations API是一个允许您对 DOM 元素进行动画处理的 API。
格式很简单。它的特点是比 CSS Transitions 和 CSS Animations 等类似标准技术更容易用 JavaScript 控制。

const element = document.querySelector(".rect");
element.animate(
  {
    transform: [
      "translateX(0px) rotate(0deg)", 
      "translateX(800px) rotate(360deg)" 
    ]
  },
  {
    duration: 3000, 
    iterations: Infinity, 
    direction: "normal", 
    easing: "ease" 
  }
);

Web Animations API 是 HTML 元素的函数，因此它不能与 WebGL 或 Canvas 一起使用。