Merge lp:~mathijshenquet/slingshot/indicator-animations into lp:~elementary-pantheon/slingshot/slingshot

[Mathijs Henquet]

Rewritten animation code, it now uses a easeOutQuint (or easeInOutQuing) alogorithm as can be seen here[1]. I also changed the FPS to a bit higher, as it runs smoothly on my computer, but that can ofcourse be changed.

I'll be on #elementary if you want to discuss anything.

http://gsgd.co.uk/sandbox/jquery/easing/

[Victor Martinez (victored)]

This was submitted a long time ago (Feb. 20, 2011). I will reject it since there was no final decision. Feel free to change the status if it was actually merged.

review: Disapprove

Unmerged revisions

46. By Mathijs Henquet on 2011-02-18

Smooth Indicator animations, and general Indicator animation fixes

=== modified file 'frontend/widgets/Indicators.vala'
--- frontend/widgets/Indicators.vala	2011-02-19 14:56:50 +0000
+++ frontend/widgets/Indicators.vala	2011-02-20 13:42:52 +0000
@@ -1,16 +1,16 @@
 /***
 BEGIN LICENSE
 Copyright (C) 2011 Maxwell Barvian <[e-mail]>
-This program is free software: you can redistribute it and/or modify it 
-under the terms of the GNU Lesser General Public License version 2.1, as published 
+This program is free software: you can redistribute it and/or modify it
+under the terms of the GNU Lesser General Public License version 2.1, 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 warranties of 
-MERCHANTABILITY, SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR 
+This program is distributed in the hope that it will be useful, but
+WITHOUT ANY WARRANTY; without even the implied warranties of
+MERCHANTABILITY, SATISFACTORY QUALITY, 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 
+
+You should have received a copy of the GNU General Public License along
 with this program.  If not, see <http://www.gnu.org/licenses/>.
 END LICENSE
 ***/
@@ -18,32 +18,40 @@
 namespace Slingshot.Frontend {
 
     public class Indicators : Gtk.HBox {
-    
+
         // Animation constants
+<<<<<<< TREE
         const int FPS = 30;
         private int duration;
         private int run_length; // total number of frames
+=======
+        const int FPS = 55;
+        private int animation_duration;
+        private int animation_frames; // total number of frames
+>>>>>>> MERGE-SOURCE
         private int current_frame = 1;
-    
+        private uint animation_loop_id = 0;
+        private bool animation_active = false;
+
         // Signals
         public signal void child_activated ();
-        
+
         // Properties
         public new GLib.List<Gtk.Widget> children;
         public int active = -1;
         private int old_active = -1;
-           
+
         public Indicators () {
-        
+
             this.homogeneous = false;
             this.spacing = 0;
-        
+
         }
-        
+
         public void append (string thelabel) {
             var indicator = new Gtk.EventBox();
             indicator.set_visible_window (false);
-            
+
             var label = new Gtk.Label(thelabel);
             Gdk.Color white;
             Gdk.Color.parse("#FFFFFF", out white);
@@ -52,76 +60,124 @@
             font.set_size (9500);
             font.set_weight (Pango.Weight.HEAVY);
             label.modify_font (font);
-            
+
             indicator.add(Slingshot.Frontend.Utilities.wrap_alignment(label, 5, 15, 5, 15)); // make sure the child widget is added with padding
             this.children.append(indicator);
-            
-            
+
+
             this.expose_event.connect(draw_background);
             indicator.button_release_event.connect( () => {
-            
+
                 this.set_active(this.children.index(indicator));
-                
+
                 return true;
-                
+
             } );
-            
+
             this.pack_start(indicator, false, false, 0);
-            
+
         }
-        
+
         public void set_active_no_signal (int index) {
-            
+
             if (index <= ((int)this.children.length - 1)) { // make sure the requested active item is in the children list
                 this.old_active = this.active;
                 this.active = index;
                 this.change_focus ();
             }
-            
+
         }
-        
+
         public void set_active (int index) {
             this.set_active_no_signal (index);
             this.child_activated (); // send signal
         }
-        
+
         public void change_focus () {
-            
+            //make sure no other animation is running, if so kill it with fire
+            if(animation_active){
+                GLib.Source.remove(animation_loop_id);
+                end_animation();
+            }
+
+            // definie animation_duration, base is 250 millisecionds for which 50 ms is added for each item to span
+            this.animation_duration = 240;
             int difference = (this.old_active - this.active).abs ();
+<<<<<<< TREE
             difference > 1 ? this.duration = difference * 75 : this.duration = 150;
             this.run_length = (int)(duration/FPS);
             
             GLib.Timeout.add (((int)(1000/this.FPS)), () => {
 				if (this.current_frame >= this.run_length) {
 				    current_frame = 1;
+=======
+            this.animation_duration += (int) (Math.pow(difference, 0.5) * 80);
+
+
+            this.animation_frames = (int)((double) animation_duration / 1000 * FPS);
+
+            // initial conditions for animation.
+            this.current_frame = 0;
+            this.animation_active = true;
+
+            this.animation_loop_id = GLib.Timeout.add (((int)(1000 / this.FPS)), () => {
+                stdout.printf("%i / %i\n", this.current_frame, this.animation_frames);
+				if (this.current_frame >= this.animation_frames) {
+				    end_animation();
+>>>>>>> MERGE-SOURCE
 					return false; // stop animation
 				}
+
+                this.current_frame++;
 				this.queue_draw ();
-				this.current_frame++;
 				return true;
 			});
-            
-        }
-        
+        }
+
+        private void end_animation(){
+            animation_active = false;
+            current_frame = 0;
+        }
+
         protected bool draw_background (Gtk.Widget widget, Gdk.EventExpose event) {
             Gtk.Allocation size;
             widget.get_allocation (out size);
             var context = Gdk.cairo_create (widget.window);
+<<<<<<< TREE
             
             // Percentage of progress
             double progress = (double)this.run_length/(double)this.current_frame;
             
+=======
+
+
+            double d = (double) this.animation_frames;
+            double t = (double) this.current_frame;
+
+            double progress;
+
+            // easeOutQuint algorithm - aka - start normal end slow
+            progress = ((t=t/d-1)*t*t*t*t + 1);
+
+            // easeInOutQuint algorithm - aka - start slow, fast in middle and slow in the end
+            //if (( t /= d/2) < 1) {
+            //    progress = 0.5*t*t*t*t;
+            //}else{
+            //    progress = -0.5*((t-=2)*t*t*t - 2);
+            //}
+
+>>>>>>> MERGE-SOURCE
             // Get allocations of old rectangle
             Gtk.Allocation size_old, size_new;
             this.get_children ().nth_data (this.old_active).get_allocation(out size_old);
-            
+
             // Get allocations for the new rectangle
             this.get_children ().nth_data (this.active).get_allocation(out size_new);
-            
+
             // Move and make a new rectangle, according to progress
-            double x = size_old.x - (size_old.x - (double) size_new.x)/progress;
-            double width = size_old.width - (size_old.width - (double) size_new.width)/progress;
-            
+            double x = size_old.x + (size_new.x - (double) size_old.x) * progress;
+            double width = size_old.width + (size_new.width - (double) size_old.width) * progress;
+
             context.set_source_rgba (0.0, 0.0, 0.0, 0.70);
             double offset = 0.0;
             double radius = 3.0;
@@ -136,3 +192,4 @@
         }
     }
 }
+

=== modified file 'slingshot.vala'
--- slingshot.vala	2011-02-19 14:51:06 +0000
+++ slingshot.vala	2011-02-20 13:42:52 +0000
@@ -3,11 +3,11 @@
     public GLib.List<Slingshot.Frontend.AppItem> children = new GLib.List<Slingshot.Frontend.AppItem> ();
     public Slingshot.Frontend.Searchbar searchbar;
     public Slingshot.Frontend.Grid grid;
-    
+
     public Gee.ArrayList<Gee.HashMap<string, string>> apps = new Gee.ArrayList<Gee.HashMap<string, string>> ();
     public Gee.HashMap<string, Gdk.Pixbuf> icons = new Gee.HashMap<string, Gdk.Pixbuf>();
     public Gee.ArrayList<Gee.HashMap<string, string>> filtered = new Gee.ArrayList<Gee.HashMap<string, string>> ();
-    
+
     public Slingshot.Frontend.Indicators pages;
     public Slingshot.Frontend.Indicators categories;
     public Gee.ArrayList<GMenu.TreeDirectory> all_categories = Slingshot.Backend.GMenuEntries.get_categories ();
@@ -16,10 +16,10 @@
     public Gtk.HBox top_spacer;
 
     public SlingshotWindow () {
-    
+
         // Show desktop
         Wnck.Screen.get_default().toggle_showing_desktop (true);
-        
+
         // Window properties
         this.title = "Slingshot";
         this.skip_pager_hint = true;
@@ -28,13 +28,19 @@
         this.maximize ();
         this.stick ();
         this.set_keep_above (true);
-        
+
         // Set icon size
         Gdk.Rectangle monitor_dimensions;
         Gdk.Screen screen = Gdk.Screen.get_default();
         screen.get_monitor_geometry(screen.get_primary_monitor(), out monitor_dimensions);
+<<<<<<< TREE
         
         double suggested_size = (Math.pow (monitor_dimensions.width * monitor_dimensions.height, ((double) (1.0/3.0))) / 1.6);
+=======
+
+        // Set icon size
+        double suggested_size = (Math.pow (monitor_dimensions.width * monitor_dimensions.height, ((double)(1.0/3.0))) / 1.6);
+>>>>>>> MERGE-SOURCE
         if (suggested_size < 27) {
             this.icon_size = 24;
         } else if (suggested_size >= 27 && suggested_size < 40) {
@@ -44,22 +50,45 @@
         } else if (suggested_size >= 56) {
             this.icon_size = 64;
         }
-        
+
         // Get all apps
+<<<<<<< TREE
         Slingshot.Backend.GMenuEntries.enumerate_apps (Slingshot.Backend.GMenuEntries.get_all (), this.icons, this.icon_size, out this.apps);
         
+=======
+        Slingshot.Backend.GMenuEntries.enumerate_apps(Slingshot.Backend.GMenuEntries.get_all (), this.icons, this.icon_size, out this.apps);
+
+>>>>>>> MERGE-SOURCE
         // Add container wrapper
+<<<<<<< TREE
         var wrapper = new Gtk.EventBox (); // used for the scrolling and button press events
         wrapper.set_visible_window (false);
         this.add (wrapper);
         
+=======
+        var wrapper = new Gtk.EventBox(); // used for the scrolling and button press event
+        wrapper.set_visible_window(false);
+        this.add(wrapper);
+
+>>>>>>> MERGE-SOURCE
         // Add container
+<<<<<<< TREE
         var container = new Gtk.VBox (false, 15);
         wrapper.add (container);
         
+=======
+        this.container = new Gtk.VBox(false, 15);
+        wrapper.add (this.container);
+
+>>>>>>> MERGE-SOURCE
         // Add top bar
+<<<<<<< TREE
         var top = new Gtk.HBox (false, 0);
         
+=======
+        var top = new Gtk.HBox(false, 0);
+
+>>>>>>> MERGE-SOURCE
         this.categories = new Slingshot.Frontend.Indicators ();
         this.categories.child_activated.connect (this.change_category);
         this.categories.append ("All");
@@ -68,96 +97,139 @@
         }
         this.categories.set_active (0);
         top.pack_start (this.categories, true, true, 15);
-        
+
         this.top_spacer = new Gtk.HBox (false, 0);
         this.top_spacer.realize.connect ( () => { this.top_spacer.visible = false; } );
         this.top_spacer.can_focus = true;
         top.pack_start (this.top_spacer, false, false, 0);
-        
+
         this.searchbar = new Slingshot.Frontend.Searchbar ("Start typing to search...");
         this.searchbar.changed.connect (this.search);
         top.pack_start (this.searchbar, false, true, 15);
+<<<<<<< TREE
         
         container.pack_start (top, false, true, 15); 
         
+=======
+
+        this.container.pack_start(top, false, true, 15);
+
+>>>>>>> MERGE-SOURCE
         // Make icon grid and populate
         if (monitor_dimensions.width > monitor_dimensions.height) { // normal landscape orientation
             this.grid = new Slingshot.Frontend.Grid (4, 6);
         } else { // most likely a portrait orientation
             this.grid = new Slingshot.Frontend.Grid (6, 4);
         }
+<<<<<<< TREE
         container.pack_start (this.grid, true, true, 0);
         
+=======
+        this.container.pack_start (this.grid, true, true, 0);
+
+>>>>>>> MERGE-SOURCE
         this.populate_grid ();
-        
+
         // Add pages
         this.pages = new Slingshot.Frontend.Indicators ();
         this.pages.child_activated.connect ( () => { this.update_grid (this.filtered); } );
+<<<<<<< TREE
         
         var pages_wrapper = new Gtk.HBox (false, 0);
         pages_wrapper.set_size_request (-1, 30);        
         container.pack_end (pages_wrapper, false, true, 15);
         
+=======
+
+        var pages_wrapper = new Gtk.HBox(false, 0);
+        pages_wrapper.set_size_request (-1, 30);
+        pages_wrapper.pack_start(new Gtk.HBox(false, 0), true, true, 0); //left padding
+        pages_wrapper.pack_end(new Gtk.HBox(false, 0), true, true, 0); //left padding
+
+        this.container.pack_end(pages_wrapper, false, true, 15);
+
+>>>>>>> MERGE-SOURCE
         // Find number of pages and populate
         this.update_pages (this.apps);
         if (this.total_pages >  1) {
             pages_wrapper.pack_start (this.pages, true, false, 0);
             for (int p = 1; p <= this.total_pages; p++) {
                 this.pages.append (p.to_string ());
-            } 
+            }
         }
         this.pages.set_active (0);
-        
+
         // Signals and callbacks
         this.button_release_event.connect ( () => { this.destroy(); return false; });
         this.expose_event.connect (this.draw_background);
         this.focus_out_event.connect ( () => { this.destroy(); return true; } ); // close slingshot when the window loses focus
     }
+<<<<<<< TREE
     
     private void populate_grid () {        
     
+=======
+
+    private void populate_grid() {
+
+>>>>>>> MERGE-SOURCE
         for (int r = 0; r < this.grid.n_rows; r++) {
-            
+
             for (int c = 0; c < this.grid.n_columns; c++) {
+<<<<<<< TREE
                             
                 var item = new Slingshot.Frontend.AppItem (this.icon_size);
                 this.children.append (item);
                 
+=======
+
+                var item = new Slingshot.Frontend.AppItem(this.icon_size);
+                this.children.append(item);
+
+>>>>>>> MERGE-SOURCE
                 item.button_press_event.connect ( () => { item.grab_focus (); return true; } );
                 item.enter_notify_event.connect ( () => { item.grab_focus (); return true; } );
                 item.leave_notify_event.connect ( () => { this.top_spacer.grab_focus (); return true; } );
                 item.button_release_event.connect ( () => {
-                    
+
                     try {
                         new GLib.DesktopAppInfo.from_filename (this.filtered.get((int) (this.children.index(item) + (this.pages.active * this.grid.n_columns * this.grid.n_rows)))["desktop_file"]).launch (null, null);
                         this.destroy();
                     } catch (GLib.Error e) {
                         stdout.printf("Error! Load application: " + e.message);
                     }
-                    
+
                     return true;
-                    
+
                 });
+<<<<<<< TREE
                 
                 this.grid.attach (item, c, c + 1, r, r + 1, Gtk.AttachOptions.EXPAND, Gtk.AttachOptions.EXPAND, 0, 0);
                 
             } 
         }        
+=======
+
+                this.grid.attach(item, c, c + 1, r, r + 1, Gtk.AttachOptions.EXPAND, Gtk.AttachOptions.EXPAND, 0, 0);
+
+            }
+        }
+>>>>>>> MERGE-SOURCE
     }
-    
-    private void update_grid (Gee.ArrayList<Gee.HashMap<string, string>> apps) {    
-        
+
+    private void update_grid (Gee.ArrayList<Gee.HashMap<string, string>> apps) {
+
         int item_iter = (int)(this.pages.active * this.grid.n_columns * this.grid.n_rows);
         for (int r = 0; r < this.grid.n_rows; r++) {
-            
+
             for (int c = 0; c < this.grid.n_columns; c++) {
-                
+
                 int table_pos = c + (r * (int)this.grid.n_columns); // position in table right now
-                
+
                 var item = this.children.nth_data(table_pos);
                 if (item_iter < apps.size) {
                     var current_item = apps.get(item_iter);
-                    
+
                     // Update app
                     if (current_item["description"] == null || current_item["description"] == "") {
                         item.change_app (icons[current_item["command"]], current_item["name"], current_item["name"]);
@@ -169,80 +241,117 @@
                 } else { // fill with a blank one
                     item.visible = false;
                 }
-                
+
                 item_iter++;
-                
+
             }
         }
-        
+
         // Update number of pages
         this.update_pages (apps);
-        
+
         // Grab first one's focus
         this.children.nth_data (0).grab_focus ();
     }
-    
+
     private void change_category () {
         this.filtered.clear ();
+<<<<<<< TREE
         
+=======
+
+
+>>>>>>> MERGE-SOURCE
         if (this.categories.active != 0) {
             Slingshot.Backend.GMenuEntries.enumerate_apps (Slingshot.Backend.GMenuEntries.get_applications_for_category (this.all_categories.get (this.categories.active - 1)), this.icons, this.icon_size, out this.filtered);
         } else {
             this.filtered.add_all (this.apps);
         }
+<<<<<<< TREE
         
         this.pages.set_active (0); // go back to first page in category
+=======
+
+        this.pages.set_active (0);
+>>>>>>> MERGE-SOURCE
     }
-    
+
     private void update_pages (Gee.ArrayList<Gee.HashMap<string, string>> apps) {
         // Find current number of pages and update count
+<<<<<<< TREE
         var num_pages = (int) (apps.size / (this.grid.n_columns * this.grid.n_rows));
         (double) apps.size % (double) (this.grid.n_columns * this.grid.n_rows) > 0 ? this.total_pages = num_pages + 1 : this.total_pages = num_pages;
         
+=======
+        var num_pages = (int)(apps.size / (this.grid.n_columns * this.grid.n_rows));
+        if ((double)apps.size % (double)(this.grid.n_columns * this.grid.n_rows) > 0) {
+            this.total_pages = num_pages + 1;
+        } else {
+            this.total_pages = num_pages;
+        }
+
+>>>>>>> MERGE-SOURCE
         // Update pages
         if (this.total_pages > 1) {
             this.pages.visible = true;
+<<<<<<< TREE
             for (int p = 1; p <= this.pages.children.length (); p++) {
                 p > this.total_pages ? this.pages.children.nth_data (p - 1).visible = false : this.pages.children.nth_data (p - 1).visible = true;
+=======
+            for (int p = 1; p <= this.pages.children.length(); p++) {
+
+                if (p > this.total_pages) {
+                    this.pages.children.nth_data(p - 1).visible = false;
+                } else {
+                    this.pages.children.nth_data(p - 1).visible = true;
+                }
+
+>>>>>>> MERGE-SOURCE
             }
         } else {
             this.pages.visible = false;
         }
-        
+
     }
-    
+
     private void search() {
+<<<<<<< TREE
         
         var current_text = this.searchbar.text.down ();
         
+=======
+
+        var current_text = this.searchbar.text.down();
+
+>>>>>>> MERGE-SOURCE
         this.categories.set_active_no_signal (0); // switch to first page
         this.filtered.clear ();
-        
+
         foreach (Gee.HashMap<string, string> app in this.apps) {
             if (current_text in app["name"].down () || current_text in app["description"].down () || current_text in app["command"].down ()) {
                 this.filtered.add (app);
             }
-        }     
-        
-        this.pages.set_active (0);   
-        
+        }
+
+        this.pages.set_active (0);
+
         this.queue_draw ();
     }
-    
+
     private void page_left() {
-        
+
         if (this.pages.active >= 1) {
             this.pages.set_active (this.pages.active - 1);
         }
-        
+
     }
-    
+
     private void page_right() {
-        
+
         if ((this.pages.active + 1) < this.total_pages) {
             this.pages.set_active (this.pages.active + 1);
         }
-        
+
     }
 
     private bool draw_background (Gtk.Widget widget, Gdk.EventExpose event) {
@@ -255,17 +364,23 @@
         linear_gradient.add_color_stop_rgba (0.0, 0.0, 0.0, 0.0, 0.65);
         linear_gradient.add_color_stop_rgba (0.85, 0.0, 0.0, 0.0, 0.65);
         linear_gradient.add_color_stop_rgba (0.99, 0.0, 0.0, 0.0, 0.0);
-                
+
         context.set_source (linear_gradient);
         context.paint ();
-        
+
         return false;
     }
-    
+
     // Keyboard shortcuts
+<<<<<<< TREE
     public override bool key_press_event (Gdk.EventKey event) {
         switch (Gdk.keyval_name (event.keyval)) {
         
+=======
+    public override bool key_press_event(Gdk.EventKey event) {
+        switch (Gdk.keyval_name(event.keyval)) {
+
+>>>>>>> MERGE-SOURCE
             case "Escape":
                 this.destroy ();
                 return true;
@@ -292,7 +407,7 @@
                     this.page_left ();
                     return true;
                 }
-                
+
                 break;
             case "Right":
                 var current_item = this.grid.get_children ().index (this.get_focus ());
@@ -308,16 +423,16 @@
                 this.searchbar.text = this.searchbar.text + event.str;
                 break;
         }
-        
+
         base.key_press_event (event);
         return false;
-        
+
     }
-    
+
     // Scrolling left/right for pages
     public override bool scroll_event (Gdk.EventScroll event) {
         switch (event.direction.to_string()) {
-        
+
             case "GDK_SCROLL_UP":
             case "GDK_SCROLL_LEFT":
                 this.page_left ();
@@ -326,21 +441,26 @@
             case "GDK_SCROLL_RIGHT":
                 this.page_right ();
                 break;
-        
+
         }
-                
+
         return false;
     }
-    
+
     // Override destroy for fade out and stuff
     public new void destroy () {
         // Restore windows
+<<<<<<< TREE
         Wnck.Screen.get_default ().toggle_showing_desktop (false);
         
+=======
+        Wnck.Screen.get_default().toggle_showing_desktop (false);
+
+>>>>>>> MERGE-SOURCE
         base.destroy();
         Gtk.main_quit();
     }
-    
+
 }
 
 int main (string[] args) {
@@ -348,21 +468,31 @@
 	Gtk.init (ref args);
 
 	Unique.App app = new Unique.App ("org.elementary.slingshot", null);
-	
+
 	if (app.is_running) { //close if already running
 		Unique.Command command = Unique.Command.NEW;
 		app.send_message (command, new Unique.MessageData());
 	} else {
-        
+
 		var main_win = new SlingshotWindow ();
+<<<<<<< TREE
 		main_win.show_all ();
 		
+=======
+		main_win.show_all();
+
+>>>>>>> MERGE-SOURCE
 		app.watch_window (main_win);
+<<<<<<< TREE
 		
 		Gtk.main ();
+=======
+
+		Gtk.main();
+>>>>>>> MERGE-SOURCE
 	}
-	
+
 	return 1;
-	
+
 }