好用的【Web 动画库】

最新推荐文章于 2024-04-07 10:02:02 发布

Web面试那些事儿

最新推荐文章于 2024-04-07 10:02:02 发布

阅读量270

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Likestarr/article/details/134078144

版权

系列文章

讲解 CSS 过渡和动画 transition/animation[1]
讲解 JavaScript 动画 Web Animations API[2]
讲解 Web 转场动画 View Transitions API[3]

概述/简介

在之前的系列文章中，我们详细分析并讲解了 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[4]

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

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

CSS 动画库 — Animista[5]

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

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

CSS 动画库 — Animate.css[6]

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

主要特性

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

安装使用

  pnpm add animate.css
  yarn add animate.css

  @import 'animate.css';

基本用法

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

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

也支持 JS 使用方式，如下

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

CSS 动画库 — LightGallery[7]

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

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

安装使用

  pnpm add lightgallery
  yarn add lightgallery

  import lightGallery from 'lightgallery';

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

基本用法

编写 lightgallery 所需 Dom 元素

  <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

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

效果图示

CSS 动画库 — Hover.css[8]

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

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

安装使用

  pnpm add hover.css
  yarn add hover.css

  @import 'hover.css';

基本用法

  
  <a href="#" class="button hvr-grow">Button</a>

JS 动画库 — TweenJS[9]

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

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

安装使用

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

   
  
   * 在 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>
    <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[10]

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

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

安装使用

从官网上 Download 下载 Snap.svg.zip, 解压获取文件 snap.svg-min.js 在 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[11]

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

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

安装使用

  pnpm add animejs
  yarn add animejs

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

社区动画范例

CodePen demos and examples[12]

JS 动画库 — Matter.js[13]

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

安装使用

  pnpm add matter-js
  yarn add matter-js

  import Matter from 'matter-js';

  
  var Engine = Matter.Engine;
  var Render = Matter.Render;
  var Runner = Matter.Runner;
  var Bodies = Matter.Bodies;
  var Composite = Matter.Composite;

  
  var engine = Engine.create();

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

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

  
  Composite.add(engine.world, [boxA, boxB, ground]);

  
  Render.run(render);

  
  var runner = Runner.create();

  
  Runner.run(runner, engine);

社区动画范例

CodePen demos and examples[14]

JS 动画库 — Dynamics.js[15]

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

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

安装使用

  pnpm add dynamics.js
  yarn add dynamics.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[16]

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

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

安装使用

  pnpm add lottie-web
  yarn add lottie-web

  
  import lottie from 'lottie-web'
  
  lottie.loadAnimation({ 
    container: element, 
    renderer: 'svg', 
    loop: true, 
    autoplay: true, 
    path: 'data.json' 
  });

社区动画范例

See examples on codepen.[17]

JS 动画库 — Velocity.js[18]

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

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

安装使用

  pnpm add velocity-animate
  yarn add velocity-animate

  import Velocity from 'velocity-animate'
  
  
  
  const $element = $('#animate-element')
  
  $element
    .velocity({ width: 75 }, 1500)
    .velocity({ height: 0 }, 1250);
  
  
  
  const $element = document.getElementById("animate-element")
  
  Velocity($element, { width: 75 }, 1500) 
  Velocity($element, { height: 0 }, 1500)

Web面试那些事儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
好用的【Web 动画库】

在之前的系列文章中，我们详细分析并讲解了Web 动画中CSS 动画和JS动画的定义、使用、优劣以及各自的适用场景。而本篇则主要分享如下几款优秀的 CSS 动画库和 JS 动画库，可简化Web动画的定义和使用：CSS 动画库AnimistaHover.cssJS 动画库TweenJSSnap.svgAnime.jsMatter.jsLottie-web。
复制链接

扫一扫