章节
问答
课签
笔记
评论
占位
占位

动画思路

jQuery 的动画为了稳定与兼容的的选择,所以即使在目前的 2.1.1 的版本中也是采用的帧动画而不是最新的 CSS3 动画,至于原因当然有很多我们这里就只涉及框架的帧动画的处理,帧动画的实现动画的原理跟动画片的制作一样。动画片是把一些差距不大的原画以一定帧数播放, js 动画是靠连续改变元素的某个 css 属性值,比如 left, top 达到视觉的动画效果。

book.animate({
    left: '+=50',
}).animate({
    left: '+=100',
}).animate({
    left: '-=50',
});

这里是一组最简单的动画,但是在设计上会有一个最重要的问题:

因为动画是异步的,但是 animate 方法的链式代码是同步的,所以这里要涉及一个最重要的问题,动画队列要如何有序的调用?

传统的思路

  • 定时器 setTimeout 方法收集,用一个数组保存每一个 animate 方法,把 animate 方法排成队列,在之后开始执行动画。
  • 这里存在的一个严重的问题,让定时器产生足够长的时间差,在这个时间差内去收集 animate 方法,那么这个时间差需要多长?显而易见这样的思路不是非常的精确。

jQuery 为动画量身定制了队列机制,我们的思路可以是这样

  • 有一个队列,在执行第一个 animate 方法的时候加入队列就开始执行动画,因为动画自己在执行的时候就会产生异步的时间差
  • 我们在这个时间差的里面继续去加入之后的动画 animate 进去队列,然后在每一个动画结束之后去取出队列中的第一个 animate 方法开始执行,依次循环下去

总结

两方方法都是利用异步收集同步的代码,区别就是一个是靠定时器,一个是靠动画自身,所以在精确度上来说显然是动画自身控制是最合理的。好比我们去面试,面试官只要让每一个面试完毕的人去通知后面的人继续进来面试一样,如此反复

右边代码,请在支持 webkit 的浏览器下面调试,谷歌、急速360。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?