+ A clever trick to speed up the zoom-out animation.
authorAza Raskin <aza@mozilla.com>
Fri, 11 Jun 2010 17:33:15 -0700
changeset 49963 b10c2ffafb1ac8fc1a5c5a0391b8cc87345846dd
parent 49962 eca0ad5050e930a8630ba3cf4b8806cf4d18735e
child 49964 6ed2739545980cc12e5828ff213ca177c01e9f97
push id15039
push useredward.lee@engineering.uiuc.edu
push dateThu, 12 Aug 2010 19:47:36 +0000
treeherdermozilla-central@5da28c582cc7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
+ A clever trick to speed up the zoom-out animation. Because image scaling is slowest on big images, we cheat and start the image at half-size and placed accordingly. Because the animation is fast, you can't see the difference but it feels a lot zippier. The only trick is choosing the right animation function so that you don't see a change in percieved animation speed from frame #1 (the tab) to frame #2 (the half-size image) to frame #3 (the first frame of real animation). Choosing an animation that starts fast is key.
browser/base/content/tabcandy/app/ui.js
--- a/browser/base/content/tabcandy/app/ui.js
+++ b/browser/base/content/tabcandy/app/ui.js
@@ -309,18 +309,18 @@ window.Page = {
           TabMirror.pausePainting();
 
           $tab.animate({
             left: data.pos.left,
             top: data.pos.top, 
             width: data.w,
             height: data.h
           }, {
-            duration: 400,
-            easing: 'easeInQuad',
+            duration: 300,
+            easing: 'cubic-bezier',
             complete: function() { // note that this will happen on the DOM thread
               $tab.removeClass('front');
               
               self.setActiveTab(item);
               var activeGroup = Groups.getActiveGroup();
               if( activeGroup )
                 activeGroup.reorderBasedOnTabOrder(item);        
       
@@ -363,23 +363,31 @@ window.Page = {
               data = {
                 pos: $tab.position(),
                 w: $tab.width(),
                 h: $tab.height()
               };
               
               $tab.data('zoomSave', data);
 
+              // The divide by two part here is a clever way to speed up the zoom-out code.
+              // Because image scaling is slowest on big images, we cheat and start the image
+              // at half-size and placed accordingly. Because the animation is fast, you can't
+              // see the difference but it feels a lot zippier. The only trick is choosing the
+              // right animation function so that you don't see a change in percieved 
+              // animation speed from frame #1 (the tab) to frame #2 (the half-size image) to 
+              // frame #3 (the first frame of real animation). Choosing an animation that starts
+              // fast is key.
               $tab
                 .addClass('front')
                 .css({
-                  left: 0,
-                  top: 0, 
-                  width: window.innerWidth,
-                  height: data.h * (window.innerWidth / data.w)
+                  left: data.pos.left/2,
+                  top: data.pos.top/2, 
+                  width: window.innerWidth/2,
+                  height: data.h * (window.innerWidth / data.w)/2
                 });
             }                
           }
         }, 1);
       }
       
       UI.currentTab = focusTab;
     });