🍀 分享推荐，好用的【Web 动画库】都有哪些 ...

系列文章

概述/简介

在之前的系列文章中，我们详细分析并讲解了 Web 动画 中 CSS 动画 和 JS动画 的定义、使用、优劣以及各自的适用场景。

而本篇则主要分享如下几款优秀的 CSS 动画库和 JS 动画库，可简化 Web动画 的定义和使用：

CSS 动画库
- Pure CSS Loaders
- Animista
- Animate.css
- LightGallery
- Hover.css
JS 动画库
- TweenJS
- Snap.svg
- Anime.js
- Matter.js
- Dynamics.js
- Lottie-web
- Velocity.js

CSS 动画库 --- Pure CSS Loaders

一组针对速度优化的对开发人员友好的 CSS 动画。

主要特性
- 便于使用：
  
  不需要安装即可使用这个库，单击加载器显示代码，将其复制粘贴到项目中。
- 可以定制：
  
  该库有六种颜色可供选择。任选其一平台提供对应的代码块。
- 广泛收藏：
  
  Pure CSS Loaders 是主网站上众多 CSS 类一部分，其导航栏处有更多功能，如

CSS 动画库 --- Animista

一个按需 CSS 动画库。作为 Web 开发人员/设计师，您可以测试、自定义和挑选适合您的动画。

主要特性
- 易于访问：
  
  确定适合您的动画后，您可以将其复制粘贴到您的项目当中。
- 分类动画：
  
  预先设计的动画已被分类以便于访问。您可以通过单击网站上示例来查看动画效果。
- 可定制：
  
  可以对预先设计好的动画调整动画属性。然后将其代码复制粘贴到您的项目当中。
使用图示

CSS 动画库 --- Animate.css

一个随时可用的动画库，可以在您 Web 项目中使用。非常适用强调、主页、滑块和注意力引导提示。

主要特性

便于使用： 只需要通过添加这个库的 CDN 或使用 Yarn/Pnpm 安装，便可以开始使用它。
有很多模板： 主页有大量模板，您可以在将它们包含在项目中之前对其进行测试。
与 JS 兼容： 您可以通过将 Animate.css 与 JavaScript 结合来为它添加交互性。

安装使用

bash 复制代码

  pnpm add animate.css
  yarn add animate.css

css 复制代码

  @import 'animate.css';

基本用法

安装 Animate.css 后，将 animate__animated 及任何 animate__[动画名称] 添加到元素中

html 复制代码

  <h1 class="animate__animated animate__bounce">
    An animated element
  </h1>

也支持 JS 使用方式，如下

js 复制代码

  const myElement = document.querySelector('.my-element');
  myElement.classList.add('animate__animated', 'animate__bounce');

CSS 动画库 --- LightGallery

一个轻量级、模块化的 JavaScript 图像和视频画廊插件。适用于 React.js、Vue.js、Angular 和 TypeScript。

主要特性
- 完全响应：
  
  LightGallery 的 CSS 类响应不同的屏幕尺寸。该库还针对触摸设备进行了优化。
- 附带插件：
  
  可以通过 Thumbnail、Video 和 MediumZoom 等插件提高该库的可用性。
- 可定制：
  
  选择 CSS 类自定义动画效果(旋转、翻转、缩放图像)，以满足您的需要。
- 商业化：
  
  如果将 lightGallery 用于商业项目，则需要购买商业许可证密钥

安装使用

bash 复制代码

  pnpm add lightgallery
  yarn add lightgallery

js 复制代码

  import lightGallery from 'lightgallery';

  // import plugins
  import lgThumbnail from 'lightgallery/plugins/thumbnail'
  import lgZoom from 'lightgallery/plugins/zoom'

基本用法

编写 lightgallery 所需 Dom 元素

html 复制代码

  <div id="lightgallery">
    <a href="img/img1.jpg" data-lg-size="1600-2400">
      <img alt=".." src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg" data-lg-size="1024-800">
      <img alt=".." src="img/thumb2.jpg" />
    </a>
    /* ... */
  </div>

通过 JS 初始化 lightGallery

js 复制代码

  <script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'), {
      plugins: [lgZoom, lgThumbnail],
      speed: 500,
      licenseKey: 'your_license_key'
      // ... other settings
    });
  </script>

效果图示

CSS 动画库 --- Hover.css

CSS3 悬停效果集合，可应用于链接、按钮、徽标、SVG、特色图像等。轻松应用到您自己的元素、修改或仅用于获取灵感。

主要特性
- 动画范例：
  
  主页有不同的类别悬停动画范例 (2D Transitions、Background Transitions)
- 跨浏览器支持：
  
  Hover.CSS 适用于主流浏览器 (Chrome、FireFox)
- 许可：
  
  个人使用免费，用于商业化项目中需购买许可证

安装使用

bash 复制代码

  pnpm add hover.css
  yarn add hover.css

css 复制代码

  @import 'hover.css';

基本用法

html 复制代码

  <!-- class="hvr-[动画效果名]", 如 hvr-grow -->
  <a href="#" class="button hvr-grow">Button</a>

JS 动画库 --- TweenJS

TweenJS 是一个简单但功能强大的补间动画库。它支持数字对象属性和 CSS 样式属性的补间的动画。

主要特性
- 能够很好的和 EaselJS 库集成，但也不依赖或特定于它。
- 它支持渐变的数字对象属性和 CSS 样式属性的 补间动画
- 它的 API 简单但很强大，可以通过链式调用来创建复杂的动画。

安装使用

html 复制代码

  <script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script>

js 复制代码

   
  /**
   * 在 400 毫秒内将目标补间到 x 值 300
   * 将其 `label` 属性值设置为 "hello!"
   * 等待 500 毫秒
   * 在 1 秒内将目标的 alpha 补间到 0 并将其可见设置为 false
   * 调用 onComplete 回调函数
   */
  createjs.Tween.get(target)
   .to({ x: 300 }, 400)
   .set({ label: "hello!" })
   .wait(500)
   .to({ alpha: 0, visible: false }, 1000)
   .call(onComplete);

完整范例

html 复制代码

  <html>
    <head>
      <script type="text/javascript" src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
      <script>
        function init() {
          var stage = new createjs.Stage('demoCanvas')
          var circle = new createjs.Shape()
          circle.graphics.beginFill('Crimson').drawCircle(0, 0, 50)
          circle.x = 100
          circle.y = 100
          stage.addChild(circle)
          createjs.Tween.get(circle, { loop: true })
            .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
            .to({ alpha: 0, y: 75 }, 500, createjs.Ease.getPowInOut(2))
            .to({ alpha: 0, y: 125 }, 100)
            .to({ alpha: 1, y: 100 }, 500, createjs.Ease.getPowInOut(2))
            .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2))
          createjs.Ticker.setFPS(60)
          createjs.Ticker.addEventListener('tick', stage)
        }
      </script>
    </head>
    <body onload="init();">
      <canvas id="demoCanvas" width="500" height="200"></canvas>
    </body>
  </html>

JS 动画库 --- Snap.svg

一个适用于现代 Web 端的 JavaScript SVG 库。它让你处理 SVG 就像你用 jQuery 操作 DOM 一样简单！

主要特性
- 它让你处理 SVG 就像你用 jQuery 操作 DOM 一样简单。
- 它支持最新的 SVG 遮罩，剪裁，模式，完整的渐变，分组等功能。
- 它有相当丰富且详细的 API 文档说明和代码范例，为开发者提供帮助。

安装使用

从官网上 Download 下载 Snap.svg.zip , 解压获取文件 snap.svg-min.js 在 html 中引用

html 复制代码

  <html>
    <head>
      <title>Snap.svg</title>
    </head>

    <body>
      <svg id="svg" width="100%" height="300px"></svg>
    </body>

    <script src="./snap.svg-min.js"></script>
    <script type="text/javascript">
      var svg = Snap('#svg')
      var bigCircle = svg.circle(150, 150, 100)

      bigCircle.attr({
        fill: "#bada55",
        stroke: "#000",
        strokeWidth: 5
      })
    </script>
  </html>

JS 动画库 --- Anime.js

Anime.js 是一个轻量级 JavaScript 动画库，具有简单但功能强大的 API。适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。

主要特性
- 一个轻量的JavaScript 动画库，拥有简单而强大的API，且开源、免费、极小、简单易用。
- 它可以对 CSS，DOM，SVG，和 JS 对象实现高性能，平滑过渡的动画效果。
- 它有着详细的 API 文档说明，且在 Codepen 有着大量的 Demo 动画范例。

安装使用

bash 复制代码

  pnpm add animejs
  yarn add animejs

js 复制代码

  import anime from 'animejs/lib/anime.es.js';
  
  anime({
    targets: '.class-selector',
    width: '100%', // -> from '28px' to '100%',
    easing: 'easeInOutQuad',
    direction: 'alternate',
    loop: true
  });

社区动画范例

CodePen demos and examples

JS 动画库 --- Matter.js

Matter.js 是一个用于 web 端的二维物理引擎。它支持如下特性：


刚体(Rigid bodies)	复合体(Compound bodies)	复合材料(Composite bodies)
凹面和凸面(Concave and convex hulls)	物理特性(质量、面积、密度等)	恢复原状(弹性和非弹性碰撞)
碰撞(粗略阶段、中间阶段、精细阶段)	稳定的堆叠和静	动量守恒(Conservation of momentum)
摩擦力和阻力(Friction and resistance)	事件监听(Events)	约束(Constraints)
重力(Gravity)	睡眠和静态物体	圆角(倒角)Rounded corners (chamfering)
视图（平移、缩放） Views (translate, zoom)	碰撞查询(射线追踪、区域测试)	时间缩放(减速、加速)
Canvas 渲染器(支持向量和纹理)	MatterTools 工具(创建、测试和调试)	世界状态序列化(需要 resurrect.js)
跨浏览器(Chrome、Firefox、Safari、IE8+)和 Node.js 支持	兼容移动端(触摸、响应)	原生 JS 实现

安装使用

bash 复制代码

  pnpm add matter-js
  yarn add matter-js

js 复制代码

  import Matter from 'matter-js';

  // module aliases
  var Engine = Matter.Engine;
  var Render = Matter.Render;
  var Runner = Matter.Runner;
  var Bodies = Matter.Bodies;
  var Composite = Matter.Composite;

  // create an engine
  var engine = Engine.create();

  // create a renderer
  var render = Render.create({
      element: document.body,
      engine: engine
  });

  // create two boxes and a ground
  var boxA = Bodies.rectangle(400, 200, 80, 80);
  var boxB = Bodies.rectangle(450, 50, 80, 80);
  var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

  // add all of the bodies to the world
  Composite.add(engine.world, [boxA, boxB, ground]);

  // run the renderer
  Render.run(render);

  // create runner
  var runner = Runner.create();

  // run the engine
  Runner.run(runner, engine);

社区动画范例

CodePen demos and examples

JS 动画库 --- Dynamics.js

Dynamics.js 是一款可以创建物理运动动画效果库。你可以用来制作任何 DOM 元素的CSS属性动画，也可以制作SVG 属性动画和任何 JavaScript 对象动画。

主要特性
- 它可以对 CSS，DOM，SVG，和 JS 对象实现平滑过渡的动画效果。
- 它可以制定 持续时间、频率、预期尺寸和强度等数据，创造出符合物理效果的动效。

安装使用

bash 复制代码

  pnpm add dynamics.js
  yarn add dynamics.js

js 复制代码

  import dynamics from 'dynamics.js'
  
  dynamics.animate(
    document.getElementById("element"), 
    {
      translateX: 350,
      scale: 2,
      opacity: 0.5
    }, 
    {
      type: dynamics.spring,
      frequency: 200,
      friction: 200,
      duration: 1500
    }
  )

JS 动画库 --- Lottie-web

Lottie-web 是一个库，它可以解析使用 Bodymovin 插件以 JSON 格式导出的 Adobe After Effects 动画，并在 Web 应用程序上本地渲染它们, 快速创建由专业设计师在 After Effects 中创建的高级动画。

主要特性
- 动画由设计师使用专业动画工具 Adobe After Effects 实现，使动画实现更加方便，效果更好
- 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量
- 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好
- 设计制作动画，前端展现动画，专业人做专业事，分工合理

安装使用

bash 复制代码

  pnpm add lottie-web
  yarn add lottie-web

js 复制代码

  /* bodymovin 此名称截止到 v4.13.0, 从v5.0.1后命名为 lottie-web */
  import lottie from 'lottie-web'
  
  lottie.loadAnimation({ 
    container: element, // the dom element that will contain the animation 
    renderer: 'svg', 
    loop: true, 
    autoplay: true, 
    path: 'data.json' // the path to the animation json 
  });

社区动画范例

See examples on codepen.

JS 动画库 --- Velocity.js

Velocity 是一个与jQuery的$.animate（）具有相同API的动画引擎。无论是否使用jQuery，它都能工作。它的速度非常快，并且具有颜色动画、转换、循环、简化、SVG支持和滚动功能。它是jQuery和CSS转换的最佳组合。

主要特性
- Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。
- 它有 jQuery 的 $.animate() 相同的 API，简单易用，很容易上手。
- 它不仅包含了 $.animate() 的全部功能，还拥有颜色动画、转换动画、SVG 动画等功能。
- 它也有类似 animate.css 的预定义动画 api，支持自定义动效，拼装队列动效等
- 支持动画回调函数，比如 Begin & Complete & Progress 回调函数

安装使用

bash 复制代码

  pnpm add velocity-animate
  yarn add velocity-animate

js 复制代码

  import Velocity from 'velocity-animate'
  
  
  /* 使用方式一 (依赖于 jquery，必须安装 jquery) */
  const $element = $('#animate-element')
  
  $element
    .velocity({ width: 75 }, 1500)
    .velocity({ height: 0 }, 1250);
  
  
  /* 使用方式二 无需安装 jquery) */
  const $element = document.getElementById("animate-element")
  
  Velocity($element, { width: 75 }, 1500) 
  Velocity($element, { height: 0 }, 1500)