[课程5] 微信小程序集成lottie动画 | 改善用户体验

UP主: Zhu的AI日记 · 时长: 6:54 · 🔗 B站原视频

发布: 2025-03-19 · 收录: 2025-03-25

标签: 微信小程序 · Lottie动画 · Cursor · AI编程 · 前端开发

动画效果为什么能提升用户体验

如果一个应用显示了平滑有趣的动画效果，你是不是会更有兴趣去使用它？

身为个人开发者，我们常常一门心思扑在功能实现上，却忽视了用户体验的优化。这恰恰是许多小程序给人感觉不够专业的关键因素。

怎么才能提升用户体验？一个立竿见影的方法，就是为你的小程序添加专业的动画效果。这样不仅能让小程序更具趣味性，还能极大提升用户对它的专业印象。

我之前的课程分享过如何在 iOS 应用里实现动画效果的方法。今天把目光聚焦在微信小程序上，探讨如何在微信小程序中呈现类似的动画效果。需要注意的是，微信小程序限制更多，因此实现动画的方法跟 iOS 应用有所不同。

为什么不推荐用 GIF 动画

说到在移动应用中加载动画，很多人会想到传统的 GIF 动画。但 GIF 在移动端有很明显的缺陷：画质差，而且文件很大。

不仅视觉效果差强人意，它的文件大小还很容易突破微信小程序的限制，导致无法发布。

Lottie 动画的优势与资源获取

开发移动端应用时，我会推荐你使用 Lottie 动画。它用 JSON 文件来存储动画数据，所以文件很小，而且色彩丰富，非常适合显示复杂且精细的动画，是移动端展示动画效果的好选择。

Lottie 也有很多免费且高质量的资源可以用。你可以到 lottiefiles.com 注册一个免费账号，然后下载众多高质量动画。

比如根据我们小程序的特点，我找了一个跟服饰搭配有关的动画，点击下载。在下载页面还可以做一些简单快速的编辑，比如把白色背景去掉，让它变成透明背景。满意以后就可以直接下载它的 JSON 文件。

你可以专门创建一个文件夹，来管理所有下载的 Lottie 动画。

用 Cursor 在微信小程序里集成 Lottie

来到 Cursor 里，你可以这样写提示词：

1. 先告诉它：你想要在微信小程序中集成 Lottie 动画，给它提供需求背景。
2. 具体告诉它：你要在哪个页面的什么位置显示 Lottie 动画。
3. 很重要的一点：告诉它你没有在小程序中集成 Lottie 的经验，需要它一步一步引导你完成相关配置。

同时要确保你选择的是 Agent 模式，这样它在执行过程中可以帮你自动完成很多操作。

然后 Cursor 会按照你的需求去执行：它会先安装专门为小程序定制的依赖文件，再按它的经验去实现集成，并显示你指定的 Lottie 动画。

AI 容易“幻觉”的坑：用参考文档纠偏

但运行结果往往会让你失望，因为 AI 总是会忽略小程序对加载 JS 文件的限制，导致动画无法显示。甚至你把错误信息反馈给 Cursor，它也很难立即纠正。因为在小程序加载动画的问题上，AI 很容易产生知识幻觉。

为了避免浪费太多时间，我准备了一份“在微信小程序中正确加载 Lottie 动画”的参考文件。通过严格执行标准方法，问题很快就解决了。

使用参考文件时注意三点：

1. 让 AI 先阅读参考文档，学习标准流程，否则它很容易继续坚持自己的方法。
2. 让它严格按照标准流程执行，不要自己发挥。
3. 管理 Lottie 动画对象时，把 JSON 代码留空，让你自己手动更新。因为复杂动画的 JSON 数据往往很庞大，让 AI 复制会耽误很多时间。

通过这样的引导，我们希望展现的动画最终就正确出现在登录页面上。

集成结果与复用到更多页面

如果你觉得目前的视频内容对你有帮助，麻烦你帮我给这个视频点赞并收藏。这样不仅可以帮助频道持续发展，也能让平台算法知道你喜欢这一类的视频，你下次会更及时收到类似内容的推送。

利用相同的方法，我们又下载了另外一个动画文件，并轻松把它显示到了小程序主页上。以上就是在小程序中集成 Lottie 动画的主要过程。

完整版课程与知识星球

如果你想了解更完整的开发过程，我还录制了一个 40 多分钟的完整版本。这个版本里我详细介绍了开发的完整步骤，以及新手第一次集成 Lottie 动画过程中可能会遇到的问题和对应解决办法，确保即使你之前没有一点 AI 开发基础，也能很容易理解和跟随。

这个版本我已经上传到我的知识星球里了。如果你想更系统地学习，欢迎加入我的知识星球。

在我的知识星球里，你不仅能够免费获取本频道发布的所有付费课程。最近我们还推出了成员之间组队共享 Cursor Pro 账号的活动，把使用 Cursor 的成本从每个月 140 多人民币降到 30 多块。如果你感兴趣，也可以加入我们。

如果你正在为 AI 时代的激烈竞争感到焦虑，担心自己会被淘汰，渴望快速掌握新技能来提高竞争力，也欢迎加入我的知识星球。在这里你将获得从零基础到高阶的各平台 AI 开发完整视频，免费畅享付费课程资源，为你搭建通往 AI 领域的快速通道。

你还会获得不限制的一对一答疑服务，实时解决学习与实践中的难题，让你告别迷茫，不走弯路。你也可以利用星球内的人脉资源，与新友组队共享 Cursor Pro 账号，大幅降低每月使用 AI 的成本。

同时我会持续追踪并分享 AI 的最新趋势，让你总能先人一步，挖掘潜在的职业发展机会。

结尾

AI 已经彻底打破了技术的门槛，让每一位曾经不懂编程的外行人，都拥有了弯道超车的机会。

拥抱 AI，你的未来将从今天开始改变。