Awesome web animation

Awesome Web Animation ¶

此列表包含用于创建网络动画的最有用的工具和数据. * 任何有助于在浏览器中制作任何动画的库 - Canvas、SVG、文本、滚动等. * 有关浏览器动画的书籍. * 可以导出到浏览器的动画 GUI 工具.

SVG¶

Snap.svg - 用于现代 SVG 图形的 JavaScript 库.
Svg.js - 用于操作和动画 SVG 的轻量级库.
Vivus - 在 SVG 上制作绘图动画的库.
Walkway - 一种为 SVG 元素制作动画的简单方法.
Raphael - JavaScript 矢量库.
Bonsai - BonsaiJS 是一个图形库和渲染器.

Common¶

GSAP - JavaScript 动画库.
TweenJS - 一个简单但功能强大的 JavaScript 补间/动画库. CreateJS 库套件的一部分.
Anime.js - JavaScript 动画引擎.
Mojs - 用于网络的动态图形工具带.
Animo.js - 一个强大的管理 CSS 动画的小工具.
Move.js - CSS3 支持的 JavaScript 动画框架.
Velocity - 加速的 JavaScript 动画.
Animateplus - 现代网络的 A+ 动画模块.
Animatic - CSS 动画引擎.
Just Animate - 让动画变得简单.
Haiku Core - 用于 Web 的交互式 UI 动画引擎. Haiku Animator 的核心渲染器.
Between.js - 轻量级 JavaScript (ES6) 补间引擎.
Progressbar.js - 响应灵敏的进度条.
Bezier easing - 用于 JavaScript 动画缓动的 Cubic-bezier 实现.
Glsl easings - GLSL 中的缓动函数.
ES6-tween - ES6 版本的 tween.js.
Weeee.js - 微型 Javascript 补间引擎.

CSS¶

Animate.css - 跨浏览器的 CSS 动画库. 就像一件容易的事一样容易使用.
Motion-ui - 用于创建 CSS 过渡和动画的强大 Sass 库.
Magic - 具有特殊效果的 CSS3 动画.
Css-loaders - 一组使用 CSS 动画的加载微调器.
SpinKit - 一组使用 CSS 动画的加载指示器.
Bounce.js - 立即创建漂亮的 CSS3 动画.

Canvas¶

EaselJS - EaselJS 是一个用于在 HTML5 中构建高性能交互式 2D 内容的库.
Fabric.js - 具有动画支持的 JavaScript 画布库.
Paper.js - 矢量图形脚本的瑞士军刀 – Scriptographer 使用 HTML5 Canvas 移植到 JavaScript 和浏览器.
Konva - Konva.js 是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互性来扩展 2d 上下文.
Two.js - 具有动画支持的 web 渲染器不可知二维绘图 api.
Ocanvas - JavaScript library for object-based canvas drawing.
Curtainsjs - 将 HTML DOM 元素转换为交互式纹理平面的轻量级香草 WebGL JavaScript 库.
Hover-effect - 用于在悬停时绘制和动画图像的 JavaScript 库.
Pts.js - Pts 是一个用于可视化和创意编码的 typescript/javascript 库.
tsParticles - tsParticles 是一个轻量级的 typescript/javascript 库，用于轻松创建粒子动画.

Animate on scroll¶

AOS - 动画滚动库.
Laxxx - 简单轻量（3kb 缩小和压缩）vanilla JavaScript 插件，当你滚动时创建流畅漂亮的动画！
Wow - 向下滚动页面时显示 CSS 动画.
Scrollreveal - 动画元素滚动到视图中.
ScrollMagic - 用于神奇滚动交互的 JavaScript 库.
Motus - 滚动时模仿 CSS 关键帧的动画库.
Sal - 以性能为中心的轻量级滚动动画库.

Text¶

Malarkey - 在 vanilla JavaScript 中模拟打字机效果.
Typed.js - 一个 JavaScript 打字动画库.
Shuffle-text - Shuffle-text 是 JavaScript 文本效果库，例如 Flash 的酷遗产.
Typebot - 用于打字动画的 JavaScript 库.
Blotter - 用于在网络上绘制非常规文本效果的 JavaScript API.

React¶

Motion - 用于 React 的开源、生产就绪动画和手势库.
SVGR - 将 SVG 转换为 React 组件.
React tsParticles - tsParticles 的 ReactJS 包装器
React spring - 支持插值的 React 开源、基于 spring-physics 的动画库. 快速和容易使用.

GUI tools¶

Svgartista - SVG Artista 是一种工具，可帮助您使用纯 CSS 代码为 SVG 图像中的描边和填充属性设置动画. 它应该可以很好地处理路径、直线、多段线、矩形、圆形、椭圆和多边形元素. 但是它不能为 SVG 渐变设置动画，所以请记住这一点.
Mantra - Mantra 是一款用于网络动画的时间线编辑工具. 它的灵感来自 Adobe Flash 和 After Effects 等工具.
Animista - Animista 是一个你可以玩一组预制 css 动画的地方，调整它们并只获得你实际使用的那些.
Ceaser - 现在我们可以在所有现代浏览器中使用 CSS 转换，让我们把它们变得漂亮. 我喜欢 Flash 和 jQuery 的经典 Penner 方程式，所以我包括了其中的大部分. 如果你和我一样*，你可能会想到默认的缓动选项：“缓入、缓出等”. 神秘的 cubic-bezier 具有很大的潜力，但使用起来很麻烦. 到目前为止. 此外，触摸设备友好！
Cubic Bezier - 一个创建贝塞尔曲线的好工具. 您可以将曲线导入库或从库导出曲线，以便与他人共享.
Keyframer - 帮助可视化动画组件和输出所需代码的工具.
CSS Animation Kit - 从顶部面板中选择任何预定义的示例. 下面的示例有一个@keyframes 的时间轴. 时间轴有 101 个关键帧（0% 到 100%），方向从左到右. 突出显示的关键帧表示某些样式已分配给该点. 您可以在选定的点添加新样式.

Books¶

SVG animation ¶

SVG 非常强大，它减少了 HTTP 请求并且在任何显示上都清晰. 当您探索响应式动画和性能提升的功能时，它会变得越来越有趣. 当您制作 SVG 动画时，您必须了解正常的图像特征，例如构图、颜色、实现和优化. 但是当你制作动画时，它会以指数方式增加每个因素的复杂性.

Creating Web Animations: Bringing Your UIs to Life ¶

由于更快的浏览器、更好的网络标准支持和更强大的设备，网络现在定义了有趣、实用、流畅和令人难忘的下一代用户界面. 钥匙？动画片. 但是学习如何创建动画很困难，现有的学习材料并没有解释动画试图解决的 UI 问题的背景. 这就是本书的用武之地.

Transitions and Animations in CSS: Adding Motion with CSS ¶

通过独立使用 CSS 过渡和动画，为您的 Web 应用程序增添活力和深度，并改善用户体验. 通过这本简明的指南，您将了解如何使页面元素移动或改变外观，无论您是想要逼真的弹球、逐渐展开下拉菜单，还是只是在用户将鼠标悬停在某个元素上时引起人们的注意.

Designing Interface Animation: Meaningful Motion for User Experience ¶

有效的界面动画巧妙地结合了形式和功能，以改善反馈、帮助定位、引导注意力、显示因果关系并表达您的品牌个性. Designing Interface Animation 向您展示了如何创建既能平衡目的和风格又能无缝融入用户体验的网络动画. 本书是面向网页设计师、UX 专业人员和前端开发人员的动效设计理论和实践速成课程.

Web Animation using JavaScript: Develop & Design ¶

自闪烁横幅广告和滚动新闻行情的时代以来，我们已经取得了长足的进步. 如今，iOS 和 Android 令人惊叹的动态设计极大地改善了用户体验，而不是降低了用户体验. 当今最好的网站和应用程序利用动画来改善界面的感觉和直观性. 没有动画的网站开始让人觉得过时了. 本书为您提供了一个技术基础，让您能够以视觉上令人惊叹且可通过编程维护的方式实现动画.

CSS Animations and Transitions for the Modern Web ¶

现代网站使用各种动画效果，不仅可以提高可用性，还可以让用户感到愉悦和惊喜. 其中一些效果需要复杂的脚本编写或编程技能，但许多都在已经熟悉 CSS 和 HTML 的设计人员的掌握范围内. CSS Animations and Transitions for the Modern Web 向设计人员展示了如何使用 CSS3 样式定义随时间向网页添加移动.

Animation in HTML, CSS, and JavaScript ¶

本书将帮助您使用 HTML、CSS 和 JavaScript 创建实用/可用/非常酷的动画. 每一章都充满了清晰解释的概念、精美的插图、色彩缤纷的代码片段和令人生畏的单行代码，保证让你的朋友嘲笑一切. 您将从学习如何在 CSS 中创建动画和过渡开始. 最后，您将学习如何通过操纵 DOM 元素以及在画布上推动像素来使用 JavaScript 创建动画.

Foundation HTML5 Animation with JavaScript ¶

Foundation HTML5 Animation with JavaScript 涵盖了使用 HTML5 画布创建动态脚本动画所需了解的所有内容. 它提供了您需要的所有相关数学信息，然后再继续学习加速度、速度、缓动、弹簧、碰撞检测、动量守恒、3D 以及正向和反向运动学等物理概念. Foundation HTML5 Animation with JavaScript 是所有使用 HTML5 或从 Flash 转换过来的 Web 开发人员的绝佳资源，以创建符合标准的游戏、应用程序和动画，这些游戏、应用程序和动画将适用于所有现代浏览器和大多数移动设备，包括 iPhone、iPad 和安卓设备.

Videos¶

Yuri Artyukh youtube channel - 这个人为此使用各种技术创建了令人惊叹的网络动画，并以 Steam 格式全部记录下来.

Awesome web animation

Awesome web animation