Merge lp:~mterry/unity-greeter/animation-fixes into lp:unity-greeter

[Michael Terry]

In conjunction with design, some further easing tweaks (different algorithm for scrolling and different duration times).

[Ken VanDine (ken-vandine)]

Looks good to me and with the minimal testing I did, it functions well.

My only comment is the old code that was removed included some really great comments describing how the animations are calculated. It would be nice to have similar comments describing the current calculations. Certainly not a blocker, but the previous code comments seemed like excellent documentation of the logic used.

review: Approve

=== modified file 'src/Makefile.am'
--- src/Makefile.am	2012-02-21 17:31:59 +0000
+++ src/Makefile.am	2012-03-13 14:51:31 +0000
@@ -8,6 +8,7 @@
 	indicator.vapi \
 	animate-timer.vala \
 	background.vala \
+	cached-image.vala \
 	dash-box.vala \
 	dash-button.vala \
 	dash-entry.vala \
 
=== modified file 'src/animate-timer.vala'
--- src/animate-timer.vala	2012-02-21 17:31:59 +0000
+++ src/animate-timer.vala	2012-03-13 14:51:31 +0000
@@ -20,6 +20,9 @@
 
 private class AnimateTimer : Object
 {
+    /* x and y are 0.0 to 1.0 */
+    public delegate double EasingFunc (double x);
+
     /* The following are the same intervals that Unity uses */
     public static const int INSTANT = 150; /* Good for animations that don't convey any information */
     public static const int FAST =    250; /* Good for animations that convey duplicated information */
@@ -27,6 +30,7 @@
     public static const int SLOW =   1000; /* Good for animations that convey information that is only presented in the animation */
 
     /* speed is in milliseconds */
+    public unowned EasingFunc easing_func {get; private set;}
     public int speed {get; set;}
     public bool is_running { get { return timeout != 0; } }
     public double progress {get; private set;}
@@ -35,9 +39,10 @@
     public signal void animate (double progress);
 
     /* speed is in milliseconds */
-    public AnimateTimer (int speed)
+    public AnimateTimer (EasingFunc func, int speed)
     {
         Object (speed: speed);
+        this.easing_func = func;
     }
 
     /* temp_speed is in milliseconds */
@@ -57,38 +62,6 @@
         length = temp_speed * TimeSpan.MILLISECOND;
     }
 
-    /* This tells us the consumer of our progress reports is changing the
-       goalposts on us.  So we need to adjust our reports accordingly.
-       'extra_progress' is how much progress is being added to the animation.
-     */
-    public bool extend (double new_progress)
-    {
-        /* As an example, say a consumer is animating from point A to point C in
-           150ms.  This is two points to cover, and at 75ms, they will be 0.5 done.
-
-           Now, they extend it to point D.  This adds an extra point, which is half
-           the original progress.  So now they call extend (0.5).
-
-           We extend in the middle, so we need the slope at halfway through our
-           progress function.  That is a constant we have (see calculate_progress
-           for details).  So we'd need to add the same amount of normalized time
-           to our process as progress, which is 0.5 / HALFWAY_VELOCITY = 0.318 in
-           this example.  Which is (length * 0.318) = 47.7ms more time to add.
-
-           Now we have 197.7ms as length of our animation.  Which changes the
-           progress values we give out.  We further need to adjust our progress
-           function to take this 'pause' in the middle of the function into
-           account.
-        */
-
-        if (progress > HALFWAY_PROGRESS)
-            return false;
-
-        extra_progress += new_progress;
-        extra_time = (TimeSpan)(length * extra_progress / HALFWAY_VELOCITY);
-        return true;
-    }
-
     public void stop ()
     {
         if (timeout != 0)
@@ -102,13 +75,6 @@
     private TimeSpan extra_time = 0;
     private double extra_progress = 0.0;
 
-    /* Derivative of our easing function at 0.5 (the halfway point).
-       See calculate_progress() for functions. */
-    private static const double HALFWAY_VELOCITY = 1.5708;
-
-    /* The y value of our easing function at 0.5 (the halway point) */
-    private static const double HALFWAY_PROGRESS = 0.75;
-
     private bool animate_cb ()
     {
         if (start_time == 0)
@@ -129,94 +95,39 @@
     /* Returns 0.0 to 1.0 where 1.0 is at or past end_time */
     private double normalize_time (TimeSpan now)
     {
-        var total = length;
-        var halfway = start_time + length / 2;
-        if (now > halfway)
-            now -= extra_time;
-
-        return (((double)(now - start_time)) / total).clamp (0.0, 1.0);
-    }
-
-    /* Incoming progress count is original, un-extra-time enhanced progress */
-    private double normalize_progress (double p)
-    {
-        /* So without extra time, progress goes from 0.0 to 1.0.  But with
-           extra time, the beginning and end want to keep the same function,
-           just squeezed into a smaller place in the graph.  So we figure out
-           that mapping here. */
-        var extra_mapped = extra_progress / (1.0 + extra_progress);
-        var half_mapped = HALFWAY_PROGRESS / (1.0 + extra_progress);
-        if (p < HALFWAY_PROGRESS)
-            return p * (half_mapped / HALFWAY_PROGRESS);
-        else
-        {
-            var end = 1.0 - half_mapped - extra_mapped;
-            return (p - HALFWAY_PROGRESS) * (end / (1 - HALFWAY_PROGRESS)) + half_mapped + extra_mapped;
-        }
+        return (((double)(now - start_time)) / length).clamp (0.0, 1.0);
     }
 
     /* Returns 0.0 to 1.0 where 1.0 is done.
        time is not normalized yet! */
     private double calculate_progress (TimeSpan time)
     {
-        /* Use a sine wave function similar to what Unity uses.  They call it
-           'easing' and is designed to make the animation start and end slower
-           than in the middle. 
-
-           ((1 - Math.cos (Math.PI * time)) / 2) is the basic sine curve for
-           easing, used by Unity and others.  By squaring that and reversing
-           the curve (by using 1 - x and 1 - y), we get a more exaggerated
-           slowdown.
-
-           For clarity, here is the whole function:
-            y = 1 - ((1 - cos (pi * (1 - x))) / 2) ^ 2
-
-           Here is the derivative of that function (useful for calculating
-           slope at a given point, used elsewhere in this class):
-            y = (pi * (cos (pi * (x - 1)) - 1)) * sin (pi * (x - 1)) / 2 
-
-           */
-
-        /* But due to the ability to add extra time into the equation, we
-           are actually three functions:
-           1) x=[0,A) = normal
-           2) x=[A,B] = halfway slope
-           3) x=(B,1.0] = picks up where first function left off */
-
-        var y = 0.0;
-        var orig_half_point = start_time + length / 2;
-
-        if (time > start_time + length + extra_time)
-        {
-            y = 1.0;
-        }
-        else if (time < orig_half_point)
-        {
-            var x = normalize_time (time);
-            y = easing_function (x);
-            y = normalize_progress (y);
-        }
-        else if (time < orig_half_point + extra_time)
-        {
-            var xpercent = (time - orig_half_point) / (double)extra_time;
-            y = (xpercent * extra_progress + HALFWAY_PROGRESS) / (1.0 + extra_progress);
-        }
-        else
-        {
-            var x = normalize_time (time);
-            y = easing_function (x);
-            y = normalize_progress (y);
-        }
-
+        var x = normalize_time (time);
+        var y = easing_func (x);
         return y.clamp (0.0, 1.0);
     }
 
-    private double easing_function (double x)
-    {
-        var y = (1 - Math.cos (Math.PI * (1.0 - x))) / 2;
-        y = y * y;
-        y = 1.0 - y;
-        return y;
+    public static double ease_in_out (double x)
+    {
+        return (1 - Math.cos (Math.PI * x)) / 2;
+    }
+
+    /*public static double ease_in_quad (double x)
+    {
+        return Math.pow (x, 2);
+    }*/
+    /*public static double ease_out_quad (double x)
+    {
+        return -1 * Math.pow (x - 1, 2) + 1;
+    }*/
+
+    /*public static double ease_in_quint (double x)
+    {
+        return Math.pow (x, 5);
+    }*/
+    public static double ease_out_quint (double x)
+    {
+        return Math.pow (x - 1, 5) + 1;
     }
 }
 
 
=== modified file 'src/background.vala'
--- src/background.vala	2012-02-21 22:36:02 +0000
+++ src/background.vala	2012-03-13 14:51:31 +0000
@@ -247,7 +247,7 @@
     public Background (Cairo.Surface target_surface)
     {
         this.target_surface = target_surface;
-        timer = new AnimateTimer (AnimateTimer.INSTANT);
+        timer = new AnimateTimer (AnimateTimer.ease_in_out, 700);
         timer.animate.connect (animate_cb);
 
         loaders = new HashTable<string?, BackgroundLoader> (str_hash, str_equal);
@@ -426,6 +426,7 @@
             {
                 old = current;
                 current = new_background;
+                timer.stop ();
             }
 
             queue_draw ();
 
=== added file 'src/cached-image.vala'
--- src/cached-image.vala	1970-01-01 00:00:00 +0000
+++ src/cached-image.vala	2012-03-13 14:51:31 +0000
@@ -0,0 +1,56 @@
+/* -*- Mode: Vala; indent-tabs-mode: nil; tab-width: 4 -*-
+ *
+ * Copyright (C) 2012 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authors: Michael Terry <[e-mail]>
+ */
+
+public class CachedImage : Gtk.Image
+{
+    private static HashTable<Gdk.Pixbuf, Cairo.Surface> surface_table;
+
+    public static Cairo.Surface? get_cached_surface (Cairo.Context c, Gdk.Pixbuf pixbuf)
+    {
+        if (surface_table == null)
+            surface_table = new HashTable<Gdk.Pixbuf, Cairo.Surface> (direct_hash, direct_equal);
+
+        var surface = surface_table.lookup (pixbuf);
+        if (surface == null)
+        {
+            surface = new Cairo.Surface.similar (c.get_target (), Cairo.Content.COLOR_ALPHA, pixbuf.width, pixbuf.height);
+            var new_c = new Cairo.Context (surface);
+            Gdk.cairo_set_source_pixbuf (new_c, pixbuf, 0, 0);
+            new_c.paint ();
+            surface_table.insert (pixbuf, surface);
+        }
+        return surface;
+    }
+
+    public CachedImage (Gdk.Pixbuf? pixbuf)
+    {
+        Object (pixbuf: pixbuf);
+    }
+
+    public override bool draw (Cairo.Context c)
+    {
+        var cached_surface = get_cached_surface (c, pixbuf);
+        if (cached_surface != null)
+        {
+            c.set_source_surface (cached_surface, 0, 0);
+            c.paint ();
+        }
+        return false;
+    }
+}	
 
=== modified file 'src/dash-button.vala'
--- src/dash-button.vala	2012-03-09 05:12:16 +0000
+++ src/dash-button.vala	2012-03-13 14:51:31 +0000
@@ -54,9 +54,18 @@
         this.text = text;
 
         // add chevron
-        var image = new Gtk.Image.from_file (Path.build_filename (Config.PKGDATADIR, "arrow_right.png", null));
-        sizes.add_widget (image);
-        hbox.add (image);
+        var path = Path.build_filename (Config.PKGDATADIR, "arrow_right.png", null);
+        try
+        {
+            var pixbuf = new Gdk.Pixbuf.from_file (path);
+            var image = new CachedImage (pixbuf);
+            sizes.add_widget (image);
+            hbox.add (image);
+        }
+        catch (Error e)
+        {
+            debug ("Error loading image %s: %s", path, e.message);
+        }
 
         hbox.show_all ();
         add (hbox);
 
=== modified file 'src/fadable.vala'
--- src/fadable.vala	2012-02-21 17:31:59 +0000
+++ src/fadable.vala	2012-03-13 14:51:31 +0000
@@ -48,7 +48,7 @@
 
     construct
     {
-        timer = new AnimateTimer (AnimateTimer.INSTANT);
+        timer = new AnimateTimer (AnimateTimer.ease_out_quint, AnimateTimer.INSTANT);
         timer.animate.connect (animate_cb);
     }
 
 
=== modified file 'src/main-window.vala'
--- src/main-window.vala	2012-03-09 05:00:29 +0000
+++ src/main-window.vala	2012-03-13 14:51:31 +0000
@@ -64,7 +64,10 @@
 
         user_list = new UserList (background, menubar);
         user_list.expand = true;
-        user_list.user_displayed.connect (() => {
+        user_list.user_displayed_start.connect (() => {
+            change_background ();
+        });
+        user_list.user_displayed_done.connect (() => {
             menubar.set_layouts (user_list.selected_entry.keyboard_layouts);
             change_background ();
         });
@@ -145,12 +148,10 @@
 
     private void change_background ()
     {
-        /* Set background after user stops scrolling */
         if (background.current_background != null)
         {
-            if (change_background_timeout != 0)
-                Source.remove (change_background_timeout);
-            change_background_timeout = Timeout.add (200, change_background_timeout_cb);
+            if (change_background_timeout == 0)
+                change_background_timeout = Idle.add (change_background_timeout_cb);
         }
         else
             change_background_timeout_cb ();
 
=== modified file 'src/session-chooser.vala'
--- src/session-chooser.vala	2012-02-23 14:46:37 +0000
+++ src/session-chooser.vala	2012-03-13 14:51:31 +0000
@@ -80,7 +80,7 @@
         var pixbuf = get_badge (key);
         if (pixbuf != null)
         {
-            var image = new Gtk.Image.from_pixbuf (pixbuf);
+            var image = new CachedImage (pixbuf);
             hbox.pack_start (image, false, false, 0);
         }
 
 
=== modified file 'src/user-list.vala'
--- src/user-list.vala	2012-03-13 13:47:33 +0000
+++ src/user-list.vala	2012-03-13 14:51:31 +0000
@@ -45,6 +45,10 @@
 
     /* Default session for this user */
     public string session;
+
+    /* Cached cairo surfaces */
+    public Cairo.Surface label_in_box_surface;
+    public Cairo.Surface label_out_of_box_surface;
 }
 
 private class AuthenticationMessage
@@ -113,7 +117,7 @@
     private DashButton login_button;
     private Fadable prompt_widget_to_show;
     private Gtk.Button session_button;
-    private Gtk.Image session_image;
+    private CachedImage session_image;
     private SessionChooser session_chooser;
  
     private enum Mode
@@ -153,7 +157,8 @@
     }
 
     public signal void user_selected (string? username);
-    public signal void user_displayed ();
+    public signal void user_displayed_start ();
+    public signal void user_displayed_done ();
     public signal void respond_to_prompt (string text);
     public signal void start_session ();
 
@@ -235,7 +240,7 @@
         session_button = new Gtk.Button ();
         session_button.focus_on_click = false;
         session_button.get_accessible ().set_name (_("Session Options"));
-        session_image = new Gtk.Image.from_pixbuf (get_badge ());
+        session_image = new CachedImage (get_badge ());
         session_image.show ();
         session_button.relief = Gtk.ReliefStyle.NONE;
         session_button.add (session_image);
@@ -243,7 +248,7 @@
         session_button.show ();
         add_with_class (session_button);
 
-        scroll_timer = new AnimateTimer (AnimateTimer.FAST);
+        scroll_timer = new AnimateTimer (AnimateTimer.ease_out_quint, AnimateTimer.FAST);
         scroll_timer.animate.connect (scroll_animate_cb);
     }
 
@@ -659,6 +664,7 @@
         {
             prompt_widget_to_show.fade_in ();
             prompt_widget_to_show = null;
+            user_displayed_start ();
         }
 
         /* Stop when we get there */
@@ -669,7 +675,7 @@
     private void finished_scrolling ()
     {
         session_button.show ();
-        user_displayed ();
+        user_displayed_done ();
         mode = Mode.LOGIN;
     }
 
@@ -687,27 +693,15 @@
 
         if (scroll_target_location != entries.index (entry))
         {
-            var old_target = scroll_target_location;
             var new_target = entries.index (entry);
             var new_direction = direction;
-            var new_start = (mode == Mode.SCROLLING) ? scroll_start_location : scroll_location;
-
-            if (mode == Mode.SCROLLING && scroll_direction != new_direction)
-                return; /* ignore requests when we're already scrolling the opposite way */
+            var new_start = scroll_location;
 
             if (scroll_location != new_target)
             {
                 var new_distance = new_direction * (new_target - new_start);
-                if (mode == Mode.SCROLLING)
-                {
-                    var old_distance = new_direction * (old_target - new_start);
-                    if (!scroll_timer.extend ((new_distance - old_distance) / old_distance))
-                        return;
-                }
-                else if (new_distance > 1)
-                    scroll_timer.reset (600);
-                else
-                    scroll_timer.reset (400);
+                // Base rate is 350 (250 + 100).  If we find ourselves going further, slow down animation
+                scroll_timer.reset (250 + int.min((int)(100 * (new_distance)), 500));
 
                 if (prompt_entry.visible)
                     prompt_widget_to_show = prompt_entry;
@@ -733,7 +727,7 @@
             user_selected (selected_entry.name);
 
             if (mode == Mode.LOGIN)
-                user_displayed (); /* didn't need to move, make sure we trigger side effects */
+                user_displayed_done (); /* didn't need to move, make sure we trigger side effects */
         }
     }
     
@@ -828,6 +822,47 @@
         session_button.size_allocate (child_allocation);
     }
 
+    private Cairo.Surface entry_ensure_label_surface (UserEntry entry, Cairo.Context orig_c, bool in_box)
+    {
+        if (in_box && entry.label_in_box_surface != null)
+            return entry.label_in_box_surface;
+        else if (!in_box && entry.label_out_of_box_surface != null)
+            return entry.label_out_of_box_surface;
+
+        int w, h;
+        entry.layout.get_pixel_size (out w, out h);
+
+        var bw = (box_width - (in_box ? 1.5 : 0.5)) * grid_size;
+
+        var surface = new Cairo.Surface.similar (orig_c.get_target (), Cairo.Content.COLOR_ALPHA, (int)(bw+1), h);
+        var c = new Cairo.Context (surface);
+
+        if (w > bw)
+        {
+            var mask = new Cairo.Pattern.linear (0, 0, bw, 0);
+            if (in_box)
+            {
+                mask.add_color_stop_rgba (1.0 - 27.0 / bw, 1.0, 1.0, 1.0, 1.0);
+                mask.add_color_stop_rgba (1.0 - 21.6 / bw, 1.0, 1.0, 1.0, 0.5);
+            }
+            else
+                mask.add_color_stop_rgba (1.0 - 64.0 / bw, 1.0, 1.0, 1.0, 1.0);
+            mask.add_color_stop_rgba (1.0, 1.0, 1.0, 1.0, 0.0);
+            c.set_source (mask);
+        }
+        else
+            c.set_source_rgba (1.0, 1.0, 1.0, 1.0);
+
+        Pango.cairo_show_layout (c, entry.layout);
+
+        if (in_box)
+            entry.label_in_box_surface = surface;
+        else
+            entry.label_out_of_box_surface = surface;
+
+        return surface;
+    }
+
     private void draw_entry (Cairo.Context c, UserEntry entry, double alpha = 0.5, bool in_box = false, Gdk.Pixbuf? badge = null)
     {
         c.save ();
@@ -848,32 +883,18 @@
         int w, h;
         entry.layout.get_pixel_size (out w, out h);
 
-        /* Trim label if too wide */
-        var bw = (box_width - (in_box ? 1.1 : 0.5)) * grid_size;
-        if (w > bw)
-        {
-            var mask = new Cairo.Pattern.linear (0, 0, bw, 0);
-            if (in_box)
-            {
-                mask.add_color_stop_rgba (1.0 - 27.0 / bw, 1.0, 1.0, 1.0, 1.0);
-                mask.add_color_stop_rgba (1.0 - 21.6 / bw, 1.0, 1.0, 1.0, 0.5);
-            }
-            else
-                mask.add_color_stop_rgba (1.0 - 64.0 / bw, 1.0, 1.0, 1.0, alpha);
-            mask.add_color_stop_rgba (1.0, 1.0, 1.0, 1.0, 0.0);
-            c.set_source (mask);
-        }
-        else
-            c.set_source_rgba (1.0, 1.0, 1.0, alpha);
-
-        c.translate (grid_size / 2, (grid_size - h) / 2 + border);
-        c.move_to (0, 0);
-        Pango.cairo_show_layout (c, entry.layout);
-
-        if (entry.has_messages && (!in_box || w + 6 + message_pixbuf.get_width () < bw))
-        {
-            c.translate (w + 6, (h - message_pixbuf.get_height ()) / 2);
-            Gdk.cairo_set_source_pixbuf (c, message_pixbuf, 0, 0);
+        var label_x = grid_size / 2;
+        var label_y = (grid_size - h) / 2 + border;
+        var label_surface = entry_ensure_label_surface (entry, c, in_box);
+        c.set_source_surface (label_surface, label_x, label_y);
+        c.paint_with_alpha (alpha);
+
+        var bw = (int) ((box_width - (in_box ? 1.5 : 0.5)) * grid_size);
+        if (entry.has_messages && (!in_box || label_x + w + 6 + message_pixbuf.get_width () < bw))
+        {
+            c.translate (label_x + w + 6, label_y + (h - message_pixbuf.get_height ()) / 2);
+            var surface = CachedImage.get_cached_surface (c, message_pixbuf);
+            c.set_source_surface (surface, 0, 0);
             c.paint_with_alpha (alpha);
         }
 
@@ -887,7 +908,8 @@
             /* FIXME: The 18px offset here is because the visual assets changed size from 40px to 22px.  It should be fixed properly somewhere... */
             var ypadding = (grid_size - badge.height) / 2 - 18;
             c.translate (box_width * grid_size - grid_size - grid_size / 4 + xpadding, grid_size / 4 - ypadding - border);
-            Gdk.cairo_set_source_pixbuf (c, badge, 0, 0);
+            var surface = CachedImage.get_cached_surface (c, badge);
+            c.set_source_surface (surface, 0, 0);
             c.paint ();
             c.restore ();
         }
@@ -954,7 +976,7 @@
             var position = index - scroll_location;
 
             /* Draw entries above the box */
-            if (where == NameLocation.OUTSIDE_BOX && position < 0)
+            if (where == NameLocation.OUTSIDE_BOX && position < 0 && position > -1 * (int)(n_above + 1))
             {
                 var h_above = (double) (n_above + 1) * grid_size;
                 c.save ();
@@ -987,7 +1009,7 @@
             }
 
             /* Draw entries below the box */
-            if (where == NameLocation.OUTSIDE_BOX && position > 0)
+            if (where == NameLocation.OUTSIDE_BOX && position > 0 && position < n_below + 1)
             {
                 var h_below = (double) (n_below + 1) * grid_size;
                 c.save ();