Chapter 2, Exercise 2 – Experimenting With Easing

In the .animate call, we specify easing : “linear”. Try using “swing” and think about why this may not be appropriate for Bubble Shooter but may be a better animation method for other games. Then look at more easing settings at http://api.jqueryui.com/easings/ and see if you can incorporate any of them into the code.

Changing fireBubble in ui.js to the following produces a slightly different feel:

fireBubble : function(bubble,coords,duration){
  bubble.getSprite().animate({
    left : coords.x - ui.BUBBLE_DIMS/2,
    top : coords.y - ui.BUBBLE_DIMS/2
  },
  {
    duration : duration,
    easing :"swing"
  });
}

If you download jquery UI from http://jqueryui.com/download/ and load jquery-ui.min.js into Bubble Shooter with the other files using Modernizr then you could try an easing setting such as easeInOutBack:

fireBubble : function(bubble,coords,duration){
  bubble.getSprite().animate({
    left : coords.x - ui.BUBBLE_DIMS/2,
    top : coords.y - ui.BUBBLE_DIMS/2
  },
  {
    duration : duration,
    easing :"easeInOutBack"
  });
}