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

封装DOM动画类库(二)

困难

人数12人在学习该课程,有5人已经完成该课程

时间平均用时0.2

关键词动画类库jsdom

课程概述

作业提交截止时间:04-24

任务目的

  • 理解DOM动画的本质
  • 深入理解JS DOM动画实现原理
  • 学习和掌握javascript类库的设计与开发
  • 通过封装类库合理使用设计模式,理解设计模式及其带来好处
  • 打造属于自己的动画操作流

    任务描述

  • 在任务《封装DOM动画类库(一)》基础上继续完善动画库,实现更多选项
  • 能够完成链式调用,实现动画队列。(参考jquery的queue或者ES6的generator)
  • 增加定义动画序列和调用动画序列功能,参考velocity.js的UI Pack插件的Sequence部分
  • 增加预定义动画功能,参考velocity.js的UI Pack插件的pre-registered effects
  • 完成reverse、finish等命令
  • 支持transform动画、颜色过渡动画

    任务注意事项

  • 使用requestAnimationFrame代替定时器
  • 最好采用面向对象方式开发,对外提供umd规范接口
  • 运用合理的设计模式:此库可以用到迭代器模式、外观模式、策略模式、命令模式等
  • 代码拥有良好的注释
  • 尽量实现较多的缓动效果
  • 尽量提高动画性能
  • 动画库尽量能兼容老版浏览器

    在线学习参考资料

  • velocity.js
  • velocity.js UI pack插件
  • 慕课网课程- Velocity.js实现弹出式相框
  • 慕课网课程-原生js实现帧动画库
  • 实现tween.js
  • ES6 generator
  • JQuery queue
学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~