|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/lottiejs/
课程评论：没有评论
## Coursera 课程总结：Lottie.js 技能提升指南（专为设计师打造） 本课程旨在帮助设计师深入掌握 Lottie.js 技术，从而在网页和应用程序中实现动态、高质量的动画效果，摆脱对 GIF 和视频的依赖。 **课程核心内容：** Lottie.js 是一种强大的技术，可以将 After Effects 制作的动画数据以 JSON 格式输出，并将其转换为可在网页和应用程序中直接运行的代码。本课程将引导您： 1. **环境搭建：** 学习如何设置 Lottie.js 的使用环境。 2. **动画导出与转码：** 通过 Bodymovin 插件，将 After Effects 动画导出为代码，并学会将其分离为 HTML, CSS, JS, JSON 文件，方便管理和使用。 3. **基础使用：** 掌握 Lottie.js 提供的基础功能，理解动画的播放和控制。 4. **高级交互：** 利用 JavaScript 实现丰富的交互效果，例如鼠标悬停、滚动、点击等，这是 Lottie.js 相较于 GIF 的主要优势。您将学会如何精确控制动画的帧，实现更精细的交互。 **课程结构：** 课程分为两个主要部分： * **基础篇：** 重点在于 Lottie.js 代码的解析，学习如何将 Lottie 文件规范化为 HTML, CSS, JS, JSON 文件，并掌握其基本功能的使用。 * **高级篇：** 专注于通过 JavaScript 实现多样化的用户交互，例如触发动画效果的条件（鼠标交互、滚动等），以及对动画帧的精细控制。 **常见问题解答 (Q&A)：** * **学习 Lottie.js 的好处？** 能够将 After Effects 动画无缝集成到网页和应用程序中，显著提升设计质量。 * **零代码基础的设计师能否学习？** 即使不写代码，理解 Lottie.js 的原理和工作方式，也能与开发人员更有效地协作，创造出更出色的作品。 * **课前需要准备什么？** 建议熟悉 After Effects, VS Code, Illustrator 等常用设计工具。对于高级课程，具备 JavaScript 基础知识将更有帮助。 * **是否提供示例文件？** 是的，课程会提供示例文件，以确保学习过程的顺畅。 * **会教授 After Effects 动画制作吗？** 本课程不侧重于 After Effects 的动画制作技巧，而是专注于如何将已有的 After Effects 动画导出为代码，并在网页上应用和实现交互。 **课程亮点：** * **产品设计师视角：** 讲师是具有编码能力的产品设计师，能深刻理解设计师在实践中的痛点，并提供切实可行的解决方案。 * **聚焦核心：** 课程内容精炼，直击要点，避免冗余信息。 * **易于实践：** 课程强调“人人都能做到”的理念，让设计师突破技术障碍，实践更有吸引力的设计。 **重要提示：** 本课程并非 After Effects 动画制作教程，而是侧重于 Lottie.js 的代码集成和交互实现。 通过本课程的学习，设计师将能够掌握 Lottie.js 的强大功能，为您的作品注入更多活力和互动性。
이 강좌를 통해 Lottie에 대해 자세히 배울 수 있습니다. Lottie.js에 대해 먼저 소개를 하자면, 움직이는 애니메이션에 대한 데이터 값을 JSON 형식으로 출력해서 실제 코드로 웹과 앱에서 적용되게 해주는 기술입니다. 해당 기술을 배우면 더는 Gif, Video에 의존하지 않아도 됩니다. 로티를 사용하기 위한 환경을 먼저 세팅하고, 에프터이펙트에서 제작한 애니메이션을 바디무빈을 통해 코드로 출력해서 자바스크립트를 통해 다양한 인터렉션을 구현하는 방법을 배워볼게요. 학습 내용총 9개의 강좌 영상이 준비되어있고, 섹션은 기초와 고급 이렇게 2가지로 나뉩니다. 기초에서는 Lottie 코드를 분석하고, 사용하기 편하게 HTML, CSS, JS, JSON 파일로 분리하는 방법을 우선 배워보고 기본적으로 제공하는 기능들을 사용하며 작동법을 익힐 수 있어요.고급에서는 자바스크립트를 통해 마우스 오버나 스크롤, 클릭 등 다양한 행동에 대한 인터렉션을 구현할 수 있습니다. GIF와는 가장 큰 차이죠. 프레임을 원하는 대로 직접 컨트롤 할 수 있어요.예상 질문 Q & AQ. 로티를 배우면 뭐가 좋아요?A. 에펙으로 작업한 애니메이션을 웹, 앱에 적용할 수 있습니다. 디자인의 퀄리티를 높여주는 요소입니다.Q. 코드를 아예 모르는 디자이너인데 도움이 될까요?A. Lottie가 무엇인지, 어떻게 작동하는지 원리만 알아도 개발자와 협업할 때 재미난 작업할 수 있습니다.Q. 강의 듣기 전 준비해야 할 것이 있나요?A. 강좌에 사용된 툴은 에프터이펙트, 비주얼 스튜디오, 일러스트레이터입니다. 해당 툴들에 대한 사용법을 알고 보는 것이 좋습니다. 그리고 자바스크립트에 대한 기초 지식을 가지고 있어야 고급 강좌를 어려움 없이 들을 수 있습니다.Q. 예제 파일들은 제공하나요? A. 당연히 제공합니다. 공부하는 데 최대한 어려움 없도록 예제 파일을 제공합니다.Q. 에프터 이펙트 사용법이나 애니메이션 제작법도 알려주시나요?A. 에프터이펙트로 감각적인 애니메이션을 가르쳐주는 강의는 아닙니다. 작업된 애니메이션을 코드로 어떻게 출력하고, 웹에 어떻게 적용하고, 자바스크립트로 어떻게 인터렉션을 구현하는지에 집중한 강의입니다.강의 특징 ✨저는 코딩을 하는 프로덕트 디자이너입니다. 디자이너 관점에서 어떤 부분을 어려워하며, 어떤 부분을 구현하고 싶어하는지에 대해 매우 공감하고 있습니다. 우리가 배우려는 것은 엄청난 것이 아닙니다. 어려워 보여서 못하고 있었던 것뿐이고 막상 하면 누구나 할 수 있는 것들입니다. 로티를 학습해서 매력적인 디자인을 해보세요. 참고로, 에프터이펙트로 감각적인 애니메이션을 가르쳐주는 강의는 아닙니다. 작업된 애니메이션을 코드로 어떻게 출력하고, 웹에 어떻게 적용하고, 자바스크립트로 어떻게 인터렉션을 구현하는지에 집중한 강의입니다. 짧고 밀도 높은 핵심만 가르쳐드립니다.
