Ext.Fx 队列控制机制-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_4865/article/details/81820956

本文深入分析了Ext.Fx动画队列机制，包括如何通过concurrent、block和stopFx参数控制动画执行顺序及动画取消逻辑。特别讨论了在不同参数配置下动画的排队与执行流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

承续 Ext.Fx分析 , Ext.lib.anim 分析

Ext.Fx 为对底层Ext.lib.Anim 的封装，提供了一些现成的配置而形成的动画，比如fadeIn渐进显示,slideIn滑动显示，都是构造配置参数传递给底层的Ext.lib.Anim 对象具体运行，但是FX也进一步提供了以动画为单元的队列机制，不同于底层按照时间片排队，fx按照元素的动画调用顺序排队。

其中有三个参数控制Fx：

concurrent

控制是否启用排队机制，如果为true并且队列中第一个动画不是block则当前动画立即执行，否则如果为false并且队列中第一个动画不是block 则将当前元素的动画处理存入队列，并判断如果

当前对列为空则执行或者
要等队列中在执行的动画执行完毕后nextFx退出队列并通知下一个动画执行时才可能执行。

queueFx : function(o, fn){
        if(!this.fxQueue){
            this.fxQueue = [];
        }
        //对列第一个没有block
        if(!this.hasFxBlock()){
            Ext.applyIf(o, this.fxDefaults);
            //当前并发？
            if(!o.concurrent){
                //是否对列为空，或者stopFx要结束队列第一个动画
                var run = this.beforeFx(o);
                fn.block = o.block;
                this.fxQueue.push(fn);
                if(run){
                    this.nextFx();
                }
            }else{
                fn.call(this);
            }
        }
        return this;
    },

block

当设置为true并且concurrent为false，则当前动画处理放入队列处理，当下一个元素动画申请处理时，判断动画队列头是否是block，如果是则当前元素动画取消。

stopFx

当设置为true时，则如果自己设置的是concurrent为true，则立即终止队列第一个动画的执行，从对列第二个动画开始执行

(

如果不用Fx而使用opt配置来是普通操作动画，比如scroll("left",num,opt)

则执行后 opt会有一个anim变量，类型为Ext.Lib.Anim，可以使用

Ext.lib.AnimMgr.stop(opt.anim);

来强制停止当前进行的动画

)

举个例子：

点击按钮后，快速弹出渐隐提示，并随后慢慢渐隐消失，要达到的效果是连续多次点击时，动画不会混乱，即如果点击后发现上次动画还没结束，此次提示操作就取消

要点：

1.渐隐出现和渐隐消失要排队，而不能同时进行。(利用concurrent参数)
2.在进行渐隐消失时，如果又出现了渐隐出现动画，渐隐消失动画，则后两个动画取消（利用block参数）

演示@google code

IE 中貌似有问题，原因未知