Bug Tracker

Ticket #6281: 0001-Animation-slots.2.patch

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

updated patch to remove the requirement to call reset on chained animations

  • src/effects.js

    From 2e830e107fc1f4e836fcdff5a56c061fde4a2bbc 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
    MIME-Version: 1.0
    Content-Type: text/plain; charset=UTF-8
    Content-Transfer-Encoding: 8bit
    
    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.
    
    Signed-off-by: Carl Fürstenberg <carl@excito.com>
    ---
     src/effects.js |   99 +++++++++++++++++++++++++++++++++++++++++++++----------
     1 files changed, 81 insertions(+), 18 deletions(-)
    
    diff --git a/src/effects.js b/src/effects.js
    index 97456cc..b2d61c6 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                        });
    187188
     189
    188190                        // For JS strict compliance
    189191                        return true;
    190192                });
    jQuery.fn.extend({ 
    200202                this.each(function() {
    201203                        // go in reverse order so anything added to the queue during the loop is ignored
    202204                        for ( var i = timers.length - 1; i >= 0; i-- ) {
    203                                 if ( timers[i].elem === this ) {
     205                                var slot = timers[i];
     206                                for ( var j = slot.members.length - 1; j >= 0; j-- ) {
     207                                        if ( slot.members[j].elem === this ) {
    204208                                        if (gotoEnd) {
    205209                                                // force the next step to be the last
    206                                                 timers[i](true);
     210                                                        slot.members[j](true);
     211                                                }
     212                                                slot.remove(j);
    207213                                        }
    208 
    209                                         timers.splice(i, 1);
    210214                                }
     215                                if( slot.empty() ) {
     216                                        jQuery.timers.splice(i, 1 );
     217                                        slot.inTimer = false;
     218                                }
     219
    211220                        }
    212221                });
    213222
    jQuery.extend({ 
    281290
    282291        timers: [],
    283292
     293        slot: function(time, active) {
     294                this.members = [];
     295                if( time ) {
     296                        this.time = this.startTime = time;
     297                }
     298                if( typeof active === 'undefined' || active ) {
     299                        this.activate();
     300                }
     301        },
     302
    284303        fx: function( elem, options, prop ) {
    285304                this.options = options;
    286305                this.elem = elem;
    jQuery.extend({ 
    293312
    294313});
    295314
     315jQuery.slot.prototype = {
     316        time: null,
     317        startTime: null,
     318        activate: function() {
     319                if( !this.active ) {
     320                        this.active = true;
     321                        if( !this.inTimer ) {
     322                                this.inTimer = true;
     323                                jQuery.timers.push( this );
     324                        }
     325                }
     326        },
     327        add: function( obj ) {
     328                if( ! this.startTime ) {
     329                        this.startTime = this.time = now();
     330                }
     331                if( this.active && !this.inTimer ) {
     332                        this.inTimer = true;
     333                        jQuery.timers.push( this );
     334                }
     335                this.members.push( obj );
     336        },
     337        remove: function( id ) {
     338                if( this.members[id] ) {
     339                        this.members.splice( id, 1 );
     340                }
     341        },
     342        empty: function() {
     343                return this.members.length === 0;
     344        }
     345}
     346
    296347jQuery.fx.prototype = {
    297348        // Simple function for setting a style value
    298349        update: function() {
    jQuery.fx.prototype = { 
    319370        },
    320371
    321372        // Start an animation from one number to another
    322         custom: function( from, to, unit ) {
    323                 this.startTime = now();
     373        custom: function( from, to, unit, slot ) {
    324374                this.start = from;
    325375                this.end = to;
    326376                this.unit = unit || this.unit || "px";
    jQuery.fx.prototype = { 
    329379
    330380                var self = this;
    331381                function t( gotoEnd ) {
    332                         return self.step(gotoEnd);
     382                        return self.step(gotoEnd, slot);
    333383                }
    334384
    335385                t.elem = this.elem;
    336386
    337                 if ( t() && jQuery.timers.push(t) && !timerId ) {
     387                if( !slot.startTime || t() ) {
     388                        slot.add( t );
     389                        if( ! timerId ) {
    338390                        timerId = setInterval(jQuery.fx.tick, 13);
    339391                }
     392                }
    340393        },
    341394
    342395        // Simple 'show' function
    jQuery.fx.prototype = { 
    365418        },
    366419
    367420        // Each step of an animation
    368         step: function( gotoEnd ) {
    369                 var t = now(), done = true;
     421        step: function( gotoEnd, slot ) {
     422                var done = true;
    370423
    371                 if ( gotoEnd || t >= this.options.duration + this.startTime ) {
     424                if ( gotoEnd || slot.time >= this.options.duration + slot.startTime ) {
    372425                        this.now = this.end;
    373426                        this.pos = this.state = 1;
    374427                        this.update();
    jQuery.fx.prototype = { 
    414467                        return false;
    415468
    416469                } else {
    417                         var n = t - this.startTime;
     470                        var n = slot.time - slot.startTime;
    418471                        this.state = n / this.options.duration;
    419472
    420473                        // Perform the easing function, defaults to swing
    jQuery.extend( jQuery.fx, { 
    436489                var timers = jQuery.timers;
    437490
    438491                for ( var i = 0; i < timers.length; i++ ) {
    439                         if ( !timers[i]() ) {
    440                                 timers.splice(i--, 1);
     492                        var slot = timers[i];
     493                        slot.time = now();
     494                        for ( var j = 0; j < slot.members.length; j++ ) {
     495                                if ( !slot.members[j]() ) {
     496                                        slot.remove(j--);
     497                                }
     498                        }
     499                        if( slot.empty() ) {
     500                                jQuery.timers.splice(i, 1 );
     501                                slot.inTimer = false;
    441502                        }
    442503                }
    443504
    jQuery.extend( jQuery.fx, { 
    475536
    476537if ( jQuery.expr && jQuery.expr.filters ) {
    477538        jQuery.expr.filters.animated = function( elem ) {
    478                 return jQuery.grep(jQuery.timers, function( fn ) {
     539                return jQuery.grep(jQuery.timers, function( slot ) {
     540                                return jQuery.grep(slot.members, function( fn ) {
    479541                        return elem === fn.elem;
    480542                }).length;
     543                        }).length;
    481544        };
    482545}