jQuery之模拟实现$().animate()(下)

【jQuery之模拟实现$().animate()(下)】前言:
在上篇的基础上,接入doAnimation()
逻辑图:
jQuery之模拟实现$().animate()(下)
文章图片
实现:

jQuery之$().animate()的实现 - 锐客网这是A

运行结果:
jQuery之模拟实现$().animate()(下)
文章图片
解析:
(1)单个动画本身也有循环,也就是利用requestAnimationFrame循环动画帧,从而绘制动画
(2)当percent<1 时,即动画运行时间小于总体时间,就不断运行动画帧;当percent=1 时,表示动画结束,通知动画队列,运行下个动画,如此循环即可
jQuery之模拟实现$().animate()(下)
文章图片
(完)

    推荐阅读