奇思妙想动画

Whimsical Animations

学习如何利用 CSS、JavaScript、SVG 和 Canvas 的魔力，创造出迷人互动和令人愉悦的细节。

制作顶级网页动画并不容易。

我记得曾为此感到沮丧。我会在网上看到那些不可思议的动画，它们看起来就像魔法一样。这些动画远远超出了我所理解的 CSS 基本过渡效果。我甚至不知道从哪里开始。

在多年的时间里，我一步步地掌握了所需的技能。我学会了如何使用 SVG 和 Canvas 来创建动态插画，这是 HTML 无法实现的。我掌握了数十种实现酷炫效果所需的特殊技巧。我还学会了如何设计动画和互动，使它们真正改善用户体验。

现在，我想教你如何做所有这些事情。？

《奇趣动画》是一门互动在线课程。它不是典型的视频课程；你将通过实验、解决问题和创建自己可爱的动画来掌握实用技能。这和你之前上过的任何课程都不一样（除非你上过我的其他课程，那样的话，情况就类似了）。

动画出乎意料地重要。这看起来有点多余，但像苹果和 Stripe 这样的公司之所以投入这么多精力，是有原因的。在这门课程中，我将教你一套技能，这些技能是很少网页开发者掌握的，而许多公司都需要。

如果你曾经好奇我是如何制作某些东西的，很有可能我们在这门课程中会涉及。多年来，我学到了许多惊人的技巧和强大的技术，迫不及待想与你分享！✨

我们还将探讨
评估我们动画的性能，以及如何诊断/修复帧率问题。
构建无障碍体验，避免触发运动敏感，同时为所有人提供顶级体验。
使基础动画提升到更高层次的小细节。
如何将我们的纯 CSS/JS 粒子实现移植到 React 等基于组件的框架。

我会展示你构建这类效果所需的所有知识，但这真的只是冰山一角。你还将学习如何创建
使用 SVG 笔触的创意线条效果。本页面上有很多这样的例子！
无需任何绘图库的精美数据可视化。
大而华丽的“科技创业”效果，就像在 Stripe 和 Vercel 等公司的着陆页上看到的那样。
使用弹簧物理学的极其平滑的运动。
除了我们在整个课程中使用的香草 CSS/JS 之外，我还会向你展示如何在 React 上下文中使用 SVG，使用我最喜欢的两个 React 动画库。