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

封装DOM动画类库(一)

困难

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

时间平均用时1.2

关键词动画类库jsdom

课程概述

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

任务目的

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

    任务描述

  • 动画库API(接口文档)设计参考velocity.js,参考其源码实现,类似:Animation(DOM元素集合,变化CSS属性集合,选项)或者Animation(DOM元素集合).animation(变化CSS属性集合,选项)。
  • 动画选项设计靠拢CSS3动画概念(duration,time-function/easing,delay,iteration-count/loop),采用补间动画设计,其中time-function/easing选项最好采用贝塞尔曲线算法实现,并与定义好ease,ease-in,ease-out等等。
  • 适当设计回调函数选项(begin,complete,progress)。
  • 设计动画命令,用于调用常用动画(比如淡入淡出Animation(DOM元素集合).fadeIn(选项))和动画控制(比如停止动画:Animation(DOM元素集合).stop())。

    任务注意事项

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

    在线学习参考资料

  • velocity.js
  • 慕课网课程- Velocity.js实现弹出式相框
  • 实现tween.js
  • 慕课网课程-js动画效果
  • 慕课网课程-原生js实现帧动画库
  • CSS动画 VS JS动画,哪个更快
学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
封装DOM动画类库学到的东西2017-03-23 09:0622244
当我们讨论动画时,我们在讨论什么2017-04-19 18:4172823
点击查看更多课程优秀笔记