Web 动画之旅--掘金小册课程推荐/优惠

你将获得

1. 最核心的动画原理+设计规则+实用工具讲解；
2. CSS、JavaScript、SVG 的动画制作方法与技巧；
3. 创意十足的项目实战，引人入胜的视觉体验；
4. 拓宽技术视野，成为更优秀的 Web 动画设计师。

作者介绍

大漠，W3CPlus 创始人，《现代 Web 布局》、《防御式 CSS 精讲》、《现代 CSS》、《Web 动画之旅》和《深入浅出 SVG》小册作者，曾就职于淘宝。对 HTML、CSS 和 A11Y 等领域有一定的认识和丰富的实践经验。CSS 中国布道者，2014 年出版《图解 CSS3：核心技术与案例实战》。

小册介绍

在当今数字时代，Web 页面已经不再是简单的文本和图像，已经演化成了充满生命的艺术品。其中，关键元素就是 Web 动画。

《Web 动画之旅》将带领你踏上一场充满创意、技术与艺术的旅程，深入探讨 Web 动画的世界。

这本小册将帮助你在比阅读所有你收藏的教程所需时间更短的时间内掌握 Web 动画。你将从 Web 动画的初学者或新手变成具有专业水平的人，掌握当前 Web 动画领域的专业知识。通过实际操作，你将深入了解如何使用 CSS 、JavaScript 和 SVG 进行动画制作，并学习每种工作流程的最有效方法。学会如何通过高效、有效和精心设计的动画使你的产品或项目脱颖而出，超越竞争对手。

这本小册的主题包括：

了解 Web 动画的演进历程

在这本小册中，我们将首先回顾 Web 动画的发展史，了解它如何从简单的 GIF 动画发展到现在的复杂交互式动画。我们将研究成功案例，从中学到历史教训，并探讨动画在 Web 中的作用。

掌握 Web 动画的基础原理

深入了解 Web 动画的基础原理是创建复杂动画的关键。我们将涵盖时间线、缓动、关键帧、曲线运动和更多内容，以帮助你理解如何使动画动起来。

遵循 Web 动画设计原则

动画不仅仅是动态的图像，它还是用户体验的一部分。我们将探讨动画设计原则，包括引导用户注意、流畅性、一致性和关键动画概念，以确保你的动画在吸引用户的同时不会分散他们的注意力。

深入学习 CSS 动画

CSS 动画是 Web 动画的基础。我们将深入学习如何使用 CSS 变换、过渡和关键帧动画来创建流畅的动画效果，以及如何运用 CSS 动画原理来设计引人入胜的动画。你将更深入的掌握 CSS 动画相关的理论知识和技巧。

探索 JavaScript 动画（WAAPI）

Web 动画 API（WAAPI）提供了更高级的动画控制，我们将学习如何使用 JavaScript 来创建交互式和复杂的动画。这包括动画时间控制、自定义缓动、事件触发动画以及更多。

发现 SVG 动画的魅力

矢量图形（SVG）提供了无限的创意潜力，我们将深入了解如何创建令人惊叹的 SVG 动画。从路径动画到复杂的数据可视化，SVG 动画将使你的网页脱颖而出。

关注动画可访问性和性能优化

动画不仅仅是视觉上的体验，还需要考虑可访问性和性能。我们将讨论如何确保你的动画对于所有用户都是可访问的，并提供性能优化技巧，以确保动画在各种设备上流畅运行。

掌握动画调试和开发流程

动画开发并不总是一帆风顺，因此我们将介绍动画调试的技巧，以便快速解决问题。此外，我们还将探讨动画开发流程，包括从概念到完成，以及如何有效地使用动画库来简化工作流程。

《Web 动画之旅》是一本全面的指南，适用于所有层次的 Web 开发者和设计师。不管你是初学者还是经验丰富的专家，这本小册将帮助你掌握 Web 动画的技巧，创造出令人陶醉的艺术作品。开始你的动画之旅，让你的网页充满生命！

你会学到什么？

通过学习《Web 动画之旅》小册，你将获得以下技能和知识：

• Web 动画基础：你将理解 Web 动画的基本概念，包括时间、缓动、关键帧等。

• 动画原理：你将深入了解动画的物理原理，从而更好地模拟真实运动。

• 动画设计原则：你将学会如何设计吸引人的动画，包括引导用户注意、流畅性、一致性等。

• CSS 动画：你将掌握使用 CSS 过渡和关键帧动画来创建流畅的动画效果。

• JavaScript 动画（WAAPI） ：你将学习如何使用 Web 动画 API (WAAPI) 和 JavaScript 来创建高度交互式的动画。

• SVG 动画：你将了解如何使用矢量图形（SVG）创建各种动画效果，从路径动画到复杂的数据可视化。

• 动画可访问性：你将学会如何确保你的动画对于有特殊需求的用户都是可访问的。

• 性能优化：你将学会如何优化动画性能，以确保你的动画在各种设备上都能流畅运行。

• 动画调试：你将掌握动画调试技巧，以快速解决问题和改进动画效果。

• 动画开发流程：你将了解从概念到完成的动画开发流程，以及如何使用工具和动画库来加速开发过程。

• Web 艺术：你将学会如何将创意转化为网页上的艺术品，让你的网页充满生命和创造力。

• 用户体验改进：你将成为一个能够改善用户体验的专家，通过动画使网页更吸引人、友好和有趣。

通过这本小册的学习，你将成为一个全面的 Web 动画专家，能够在 Web 开发和设计领域中创建出引人入胜的动画作品，提高用户体验，以及持续追求创新和卓越。

适宜人群

《Web 动画之旅》适宜学习的人群包括：

• 前端开发者：想要提高其网页设计和开发技能，以在网页中添加动画元素。

• Web 设计师：希望为其网页和应用增添创意和视觉吸引力。

• 创意工作者：对数字艺术和动画有浓厚兴趣，希望将其创意转化为交互式网页艺术。

• UI/UX 设计师：希望改善用户界面和用户体验，使其更具吸引力和易用性。

• 初学者：没有经验的人也可以受益于这本小册，因为它从基础开始，逐步介绍了动画的概念和技术。

• 经验丰富的开发者和设计师：希望扩展其动画技能和深入了解动画的专业人员。

• 数字艺术家：有兴趣将其艺术作品融入到互动网页中的创作者。

• 自学者：有强烈自学动力的个人，希望探索 Web 动画并提高其职业技能。

总之，这本小册适用于广泛的人群，无论你是初学者还是专业人士，只要你对 Web 动画和网页设计有兴趣，都可以受益于其中的内容。这本小册提供了全面的指南，将帮助你掌握 Web 动画技巧，创造令人印象深刻的动画作品，提高用户体验，并不断提升自己的创意和技能。

推荐语

• 动画的精髓：理解 Web 动画基本原理

• Web 动画基础：从发展史中了解 Web 动画及动画的作用

• 流畅之美：掌握 Web 动画设计原则

• CSS 动画基础：如何让网页更生动？

• 帧动画与过渡动画：谁更适合你的业务场景？

• CSS 变换的世界：创建流畅的 Web 动画

• 你所不知道的 @keyframes：剖析 CSS 帧动画

• CSS 缓动函数基础：为 Web 动画注入灵魂

• 使用 cubic-bezier() 函数创建高级动画

• 使用 steps() 函数创建分段动画

• 使用 linear() 函数创建令人惊叹的动画曲线

• CSS 动画的播放方式：暂停、恢复和重播

• 深入了解 CSS 动画的持续时间和延迟时间

• 数学的魔法：探索数学在动画中的应用

• CSS 滚动驱动动效的艺术

• 深度解析 CSS 动画的填充模式

• 如何使用 animation-direction 更好的控制动画方向

• 多个 CSS 动画与动画合成：创造更复杂的动画效果

• 使用 CSS 视图过渡创造流畅的界面动效

• CSS 路径动画：动画对象沿指定路径运动

• 探索动画中的JavaScript事件

• 制作流畅动画的技巧与实践

• 创建 CSS 动画的小技巧

• 提升可访问性动画的关键技巧

• 探索 SVG 动画的奇妙世界：深入了解 SMIL 动画

• 深度解析动画调试的精髓

• SVG 动画基础入门

• CSS 动画实战

• 初探 Web Animations API

• 掌握 Web Animations API 的精髓

• CSS Animations vs Web Animations API ：选择最佳的动画方法

• WAAPI 综合案例：如何使用 WAAPI 创建一个动画库或组件

• 无缝创造：深入探讨 Web 动画的开发流程

• 创造视觉奇迹：深入理解带有 CSS 的 SVG 动画

• Web 上引人入胜的各种 SVG 动画效果

• SVG 动画综合案例：从简单的插图中创建看似复杂的动画

• 精通 Web 动画：探索最佳 Web 动画库