百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

No.8 - 把 AE 动画转换成 Web 原生动画

困难

人数122人在学习该课程,有58人已经完成该课程

时间平均用时0.4

课程概述

作业提交截止时间:09-01

任务目的

  • 安装 After Effect 并熟悉基本操作
  • 利用 Lottie 导出制作一个复杂的 Web 动画
  • 实现一个炫酷的带动画的官网首页

    任务描述

  • 下载我们提供给你的设计稿以及 AE 源文件,通过 Lottie 导出 Web 可用的 json 文件,实现预览demo 中所示首页动画效果
  • 参考资料: Lottie 官方文档:https://github.com/airbnb/lottie-web
  • 预览demo: http://vis.baidu.com/
  • 资源下载: 下载AE 源文件

  • 学有余力的同学,可以尝试实现 san 官网首页 卡片 hover 效果

  • 要求:鼠标悬浮在卡片上的时候出现动画
  • 预览demo:https://baidu.github.io/san/
  • 资源下载:下载 AE 源文件

任务注意事项

  • 仔细阅读学习 Lottie 官方文档
  • 注意动画在不同设备中性能和表现
  • 请保持代码风格的整齐、优雅
  • HTML 及 CSS 代码结构清晰、规范
  • 代码中含有必要的注释

在线学习参考资料

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~