Bug Tracker

Ticket #6281: 0001-Animation-slots.patch

File 0001-Animation-slots.patch, 5.4 KB (added by AzaToth, 10 years ago)

updated patch to clean up the interface

  • src/effects.js

    From 581e4d2c224da2ff910ecac9e589fff8a161cddd Mon Sep 17 00:00:00 2001
    From: =?UTF-8?q?Carl=20F=C3=BCrstenberg?= <carl@excito.com>
    Date: Mon, 15 Mar 2010 01:09:54 +0100
    Subject: [PATCH] Animation slots
    
    When multiple animations are meant to be executed in "parallel",
    currently they will be unsynchronus and thus experience an delayed
    animation for later elements. To overcome this issue, we add an slot
    mechanism which specifies that we can use one single slot for a bounch
    of animations, and they all will use the same start time and current
    time.
    ---
     src/effects.js |   87 ++++++++++++++++++++++++++++++++++++++++++-------------
     1 files changed, 66 insertions(+), 21 deletions(-)
    
    diff --git a/src/effects.js b/src/effects.js
    index 97456cc..02934de 100644
    a b jQuery.fn.extend({ 
    105105                                        .animate({opacity: to}, speed, callback);
    106106        },
    107107
    108         animate: function( prop, speed, easing, callback ) {
     108        animate: function( prop, speed, easing, callback, slot ) {
    109109                var optall = jQuery.speed(speed, easing, callback);
    110110
    111111                if ( jQuery.isEmptyObject( prop ) ) {
    jQuery.fn.extend({ 
    152152                        opt.curAnim = jQuery.extend({}, prop);
    153153
    154154                        jQuery.each( prop, function( name, val ) {
     155                                        var cur_slot = slot || new jQuery.slot( now(), true );
    155156                                var e = new jQuery.fx( self, opt, name );
    156157
    157158                                if ( rfxtypes.test(val) ) {
    jQuery.fn.extend({ 
    177178                                                        end = ((parts[1] === "-=" ? -1 : 1) * end) + start;
    178179                                                }
    179180
    180                                                 e.custom( start, end, unit );
     181                                                e.custom( start, end, unit, cur_slot );
    181182
    182183                                        } else {
    183                                                 e.custom( start, val, "" );
     184                                                e.custom( start, val, "", cur_slot );
    184185                                        }
    185186                                }
    186187                        });
    jQuery.fn.extend({ 
    200201                this.each(function() {
    201202                        // go in reverse order so anything added to the queue during the loop is ignored
    202203                        for ( var i = timers.length - 1; i >= 0; i-- ) {
    203                                 if ( timers[i].elem === this ) {
    204                                         if (gotoEnd) {
    205                                                 // force the next step to be the last
    206                                                 timers[i](true);
     204                                var slot = timers[i];
     205                                for ( var j = slot.members.length - 1; j >= 0; j-- ) {
     206                                        if ( slot.members[j].elem === this ) {
     207                                                if (gotoEnd) {
     208                                                        // force the next step to be the last
     209                                                        slot.members[j](true);
     210                                                }
     211                                                slot.members.splice(j, 1);
    207212                                        }
    208 
     213                                }
     214                                if ( !slot.members.length  ) {
    209215                                        timers.splice(i, 1);
    210216                                }
     217
    211218                        }
    212219                });
    213220
    jQuery.extend({ 
    281288
    282289        timers: [],
    283290
     291        slot: function(time, active) {
     292                this.members = [];
     293                this.time = this.startTime = time || now();
     294                this.added = false;
     295                this.active = typeof active == 'undefined' ? false : active;
     296        },
     297
    284298        fx: function( elem, options, prop ) {
    285299                this.options = options;
    286300                this.elem = elem;
    jQuery.extend({ 
    293307
    294308});
    295309
     310jQuery.slot.prototype = {
     311        activate: function() {
     312                this.active = true;
     313                if( !this.added ) {
     314                        jQuery.timers.push( this );
     315                        this.added = true;
     316                }
     317        },
     318        reset: function() {
     319                this.startTime = this.time = now();
     320        }
     321}
     322
    296323jQuery.fx.prototype = {
    297324        // Simple function for setting a style value
    298325        update: function() {
    jQuery.fx.prototype = { 
    319346        },
    320347
    321348        // Start an animation from one number to another
    322         custom: function( from, to, unit ) {
    323                 this.startTime = now();
     349        custom: function( from, to, unit, slot ) {
     350                this.startTime = slot.startTime;
    324351                this.start = from;
    325352                this.end = to;
    326353                this.unit = unit || this.unit || "px";
    jQuery.fx.prototype = { 
    329356
    330357                var self = this;
    331358                function t( gotoEnd ) {
    332                         return self.step(gotoEnd);
     359                        return self.step(gotoEnd, slot);
    333360                }
    334361
    335362                t.elem = this.elem;
    336363
    337                 if ( t() && jQuery.timers.push(t) && !timerId ) {
    338                         timerId = setInterval(jQuery.fx.tick, 13);
     364                if( t() ) {
     365                        slot.members.push( t );
     366                        if( slot.active && !slot.added ) {
     367                                jQuery.timers.push( slot );
     368                                slot.added = true;
     369                        }
     370                        if( ! timerId ) {
     371                                timerId = setInterval(jQuery.fx.tick, 13);
     372                        }
    339373                }
    340374        },
    341375
    jQuery.fx.prototype = { 
    365399        },
    366400
    367401        // Each step of an animation
    368         step: function( gotoEnd ) {
    369                 var t = now(), done = true;
     402        step: function( gotoEnd, slot ) {
     403                var done = true;
    370404
    371                 if ( gotoEnd || t >= this.options.duration + this.startTime ) {
     405                if ( gotoEnd || slot.time >= this.options.duration + slot.startTime ) {
    372406                        this.now = this.end;
    373407                        this.pos = this.state = 1;
    374408                        this.update();
    jQuery.fx.prototype = { 
    414448                        return false;
    415449
    416450                } else {
    417                         var n = t - this.startTime;
     451                        var n = slot.time - slot.startTime;
    418452                        this.state = n / this.options.duration;
    419453
    420454                        // Perform the easing function, defaults to swing
    jQuery.extend( jQuery.fx, { 
    436470                var timers = jQuery.timers;
    437471
    438472                for ( var i = 0; i < timers.length; i++ ) {
    439                         if ( !timers[i]() ) {
     473                        var slot = timers[i];
     474                        slot.time = now();
     475                        for ( var j = 0; j < slot.members.length; j++ ) {
     476                                if ( !slot.members[j]() ) {
     477                                        slot.members.splice(j--, 1);
     478                                }
     479                        }
     480                        if ( !slot.members.length  ) {
     481                                slot.added = false;
    440482                                timers.splice(i--, 1);
    441483                        }
     484
    442485                }
    443486
    444487                if ( !timers.length ) {
    jQuery.extend( jQuery.fx, { 
    475518
    476519if ( jQuery.expr && jQuery.expr.filters ) {
    477520        jQuery.expr.filters.animated = function( elem ) {
    478                 return jQuery.grep(jQuery.timers, function( fn ) {
    479                         return elem === fn.elem;
    480                 }).length;
     521                return jQuery.grep(jQuery.timers, function( slot ) {
     522                                return jQuery.grep(slot.members, function( fn ) {
     523                                                return elem === fn.elem;
     524                                        }).length;
     525                        }).length;
    481526        };
    482527}