🍀 分享推荐，好用的【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 结合来为它添加交互性。
-
-
安装使用
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
一个轻量级、模块化的 JavaScript 图像和视频画廊插件。适用于 React.js、Vue.js、Angular 和 TypeScript。
-
主要特性
-
完全响应： LightGallery 的 CSS 类响应不同的屏幕尺寸。 该库还针对触摸设备进行了优化。
-
附带插件： 可以通过 Thumbnail、Video 和 MediumZoom 等插件提高该库的可用性。
-
可定制： 选择 CSS 类自定义动画效果(旋转、翻转、缩放图像)，以满足您的需要。
-
商业化： 如果将 lightGallery 用于商业项目，则需要购买商业许可证密钥
-
-
安装使用
pnpm add lightgallery yarn add lightgalleryimport lightGallery from 'lightgallery'; // import plugins 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' // ... other settings }); </script> -
效果图示
CSS 动画库 — Hover.css
CSS3 悬停效果集合，可应用于链接、按钮、徽标、SVG、特色图像等。轻松应用到您自己的元素、修改或仅用于获取灵感。
-
主要特性
-
动画范例： 主页有不同的类别悬停动画范例 (
2D Transitions、Background Transitions) -
跨浏览器支持： Hover.css 适用于主流浏览器 (
Chrome、FireFox) -
许可： 个人使用免费，用于商业化项目中需购买许可证
-
-
安装使用
pnpm add hover.css yarn add hover.css@import 'hover.css'; -
基本用法
<!-- class="hvr-[动画效果名]", 如 hvr-grow --> <a href="#" class="button hvr-grow">Button</a>
JS 动画库 — TweenJS
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
一个适用于现代 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
Anime.js 是一个轻量级 JavaScript 动画库，具有简单但功能强大的 API。适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
-
主要特性
- 一个轻量的JavaScript 动画库， 拥有简单而强大的API，且开源、免费、极小、简单易用。
- 它可以对
CSS，DOM，SVG，和JS对象实现高性能，平滑过渡的动画效果。 - 它有着详细的 API 文档说明，且在 Codepen 有着大量的 Demo 动画范例。
-
安装使用
pnpm add animejs yarn add animejsimport anime from 'animejs/lib/anime.es.js'; anime({ targets: '.class-selector', width: '100%', // -> from '28px' to '100%', easing: 'easeInOutQuad', direction: 'alternate', loop: true }); -
社区动画范例
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 实现 |
-
安装使用
pnpm add matter-js yarn add matter-jsimport 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); -
社区动画范例
JS 动画库 — Dynamics.js
Dynamics.js 是一款可以创建物理运动动画效果库。你可以用来制作任何 DOM 元素的CSS属性动画，也可以制作SVG 属性动画和任何 JavaScript 对象动画。
-
主要特性
- 它可以对
CSS，DOM，SVG，和JS对象实现平滑过渡的动画效果。 - 它可以制定
持续时间、频率、预期尺寸和强度等数据，创造出符合物理效果的动效。
- 它可以对
-
安装使用
pnpm add dynamics.js yarn add dynamics.jsimport 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文件小很多，性能也会更好
- 设计制作动画，前端展现动画，专业人做专业事，分工合理
-
安装使用
pnpm add lottie-web yarn add lottie-web/* 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 }); -
社区动画范例
JS 动画库 — Velocity.js
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-animateimport 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)
转载自:https://juejin.cn/post/7293567405154025524