WEB前端教程：把 AE 动画转换成 Web 原生动画
安装 After Effect 并熟悉基本操作
课程目标
- 安装 After Effect 并熟悉基本操作
- 利用 Lottie 导出制作一个复杂的 Web 动画
- 实现一个炫酷的带动画的官网首页
阅读
- Lottie for Web(opens new window)
- Framer 中引入 Lottie 动画的小尝试(opens new window)
- After Effects CC 基础教程(opens new window)
编码一
下载我们提供给你的设计稿 (opens new window)以及 AE 源文件 (opens new window)，通过 Lottie 导出 Web 可用的 json 文件，实现预览 demo (opens new window)中所示首页动画效果。 
要求
- 仔细阅读学习 Lottie 官方文档(opens new window)
- 注意动画在不同设备中性能和表现
- 请保持代码风格的整齐、优雅
- HTML 及 CSS 代码结构清晰、规范
- 代码中含有必要的注释
编码二
学有余力的同学，可以下载我们提供给你的 AE 源文件 (opens new window)，尝试实现 san 官网首页卡片 hover 效果，如预览 demo (opens new window)。
- 鼠标悬浮在卡片上的时候出现动画
要求
- 注意各项属性在不同浏览器中的兼容性
- 请注意代码风格的整齐、优雅
- HTML 及 CSS 代码结构清晰、规范
- 代码中含有必要的注释
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-31 16:20
- 阅读 ( 593 )
- 分类：WEB前端开发
