资讯专栏INFORMATION COLUMN

C2:动画队列

goji / 1197人阅读

摘要:的动画系统就是执行一个函数队列。对元素应用等动画,都会默认将函数压入一个的队列。动画队列向队列中添加一个队列函数,或者替换掉当前队列。注意不一定是动画队列的最后一个动画终态。还提供了指令来立即完成整个动画队列。

动画队列

队列的作用就是让我们把一个又一个的任务放到一起,确保只有当前面的任务完成了,才会开始下一个任务。这里面的任务可以是同步的,也可以是异步的。

jQuery的动画系统就是执行一个函数队列。对jQuery元素应用fade,slide,animate等动画,都会默认将函数压入一个fx的队列。在我们使用jq的animate()的时候,我们可以在option参数中传入一个queue的标志位来决定这个动画时候压入当前元素的动画队列。如果为false,则不等待当前队列完成,而是立即执行该动画。

$element.queue(fun(next)) 让我们向队列中插入一个函数,当我们向一个空队列或者插入函数的时候,该函数会立即执行。否则将排到队尾执行。插入的这个函数fun可以执行一个同步或者异步的任务,但是不论是同步还是异步任务,如果我们想让排在fun后面的队列函数能够执行,都不要忘了在同步/异步任务完成之后使用next()。这个next 是jQuery的队列系统在调用fun的时候传入的,它是一个函数,执行它就可以让队列继续执行。

jQuery动画队列Api

.queue(): 向队列中添加一个队列函数,或者替换掉当前队列。速查
.dequeue(): 当我们替换了一个新队列之后,或者使用.stop 停止一个队列之后,我们需要这个函数来重新启动队列。速查
.stop(): 停止当前队列中正在进行的任务。它还接收一个 jumptoend的参数,如果传入true,则直接跳到当前动画的终态。注意不一定是动画队列的最后一个动画终态。速查
.delay():设置一个延时来让队列延迟执行。

更快的velocity.js

以前比较老的版本的jQuery的动画是使用定时器来完成的,新版本的jQuery增加了一项判断,如果浏览器支持window.requestAnimationFrame,则会使用window.requestAnimationFrame.

jQuery 的动画性能在移动端表现不佳,因为定时器或者其他的问题。velocity是一款性能更好的动画库。官方文档的介绍也多次强调它的快,甚至要超过css3 transition了。它的api设计和jQuery.animate差不多一样,其中动画队列的用法也和jQuery.queue一样。它可以和jQuery一起使用。当不引用jQuery时,Velocity时挂载在window对象中的,当引用jQuery的时候,就挂载在jQuery对象下。只需在原先使用$.aniamte()的地方替换成$.velocity(),就切换到了velocity动画库。

velocity 兼容

velocity.js v2.0版本 官方目前支持IE11, Edge, Chrome, Safari, and Firefox。(我自己用的时候,V2.0在IE11,edge会报错。)。所以一般用V1.5。(兼容性好了,性能就要牺牲一点。)而且在如果要支持到IE8,就必须引入jQuery1.X版本。

velocity 特性

它支持属性值函数,颜色动画,CSS3的transform,scroll(页面或者元素的滚动),svg,可以配合velocity.ui.js 注册动画集合,管理多个元素应用同一动画时的间隔,velocity.ui.js还内置了多种动画特效,方便选择。

velocity.js还提供了Velocity("finish")指令来立即完成整个动画队列。

velocity.js中文官网

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107298.html

相关文章

  • RocketMQ为什么要保证订阅关系的一致性?

    摘要:微信公众号后端进阶,专注后端技术分享框架分布式中间件服务治理等等。 微信公众号「后端进阶」,专注后端技术分享:Java、Golang、WEB框架、分布式中间件、服务治理等等。 前段时间有个朋友向我提了一个问题,他说在搭建 RocketMQ 集群过程中遇到了关于消费订阅的问题,具体问题如下: showImg(https://segmentfault.com/img/remote/1460...

    gekylin 评论0 收藏0
  • Animations开源动效分析(二)POP-Stroke动画

    摘要:是线性的动画,一条直线。也借用了类实现非线性动画。开始,系统大量引入了非线性动画。两者有一点区别,参考源码中的和动画参数详解动画今天我们来分析一下动画的源代码,首先中声明了一个是中心的圆,是一个定时器。所以总共使用了三个动画。 本教程源码Animations 作者 YouXianMing,建议配合源码项目食用 Facebook pop动画框架简易教程请移步 Facebook Pop ...

    ccj659 评论0 收藏0
  • 3 - collections 模块

    摘要:总结以上这些在日常使用的时候如果不了解,很少会去用到,但如果想写出优雅,简洁的代码,这些概念会起到一定的帮助作用参考 collections 数据类型 collections 数据类型主要是为了弥补 list /tuple / dict 的额外数据类型 ChainMap 代码: import collections ## 赋值,合并字典的作用 a = {a:A} b = {b:B} ...

    Gemini 评论0 收藏0
  • Java中的wait/notify/notifyAll

    摘要:等待一段时间是否有线程唤醒锁,如果没有,超时自动唤醒。随机唤醒等待队列中的等待同一个锁的一个线程,使这个线程退出等待队列,进入可运行状态。条件队列中是处于等待状态的线程,等待特定条件为真。在一般情况下,总应该调用唤醒所有需要被唤醒的线程。 方法 java.lang.Object public final native void wait() throws InterruptedExce...

    terasum 评论0 收藏0
  • 基于 HTML5 WebGL 的挖掘机 3D 可视化应用

    摘要:前言在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求。预览地址基于的挖掘机可视化应用界面效果预览挖机机械运动效果通过上面图片可以看出挖掘机的几个主要动作。它可以形象化地表示为带箭头的线段。 前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求。如何在一个系统中完整的显示机械的运行情况,...

    XUI 评论0 收藏0

发表评论

0条评论

goji

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<