jQ UI Easing

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery UI Easing

What is Easing

We all know that no object in real life works instantly. No object just starts and stops instantly, and almost never moves at a constant speed.

For example: If you drop a ball on the ground, it will first accelerate downward and then bounce back up after hitting the floor.

jQueryUI Easing

jQueryUI Easing function is used to specify the rate of change of a parameter with respect to time. There are different types of easing functions in jQuery like linear, swing etc. Some easing provides their result in negative value during the animation. Its depend on the properties that are being animated.

How to choose easing functions

  • CSS: CSS properties transition and animation facilitates users to pick easing functions. But they don?t support all easing functions and you have to specify the desired easing functions yourself. For example: Bezier curve
  • SCSS: Sass/SCSS can be used to describe animation also. Compass removes prefixes before the transition and animation properties, and the Compass Ceaser Plugin facilitates you pass the easing function by name.
  • Jquery Easing Plugin: jQuery with the jQuery Easing Plugins is the easiest way to describe animation with easing.

Example of jQueryUI Easing Functions

Here, we are going to define the different types of easing functions

 
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>jQuery UI Effects - Easing demo</title>  
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  7.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  8.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  9.   <link rel="stylesheet" href="/resources/demos/style.css">  
  10.   <style>  
  11.   .graph {  
  12.     float: left;  
  13.     margin-left: 10px;  
  14.   }  
  15.   </style>  
  16.   <script>  
  17.   $(function() {  
  18.     if ( !$( "<canvas>" )[0].getContext ) {  
  19.       $( "<div>" ).text(  
  20.         "Your browser doesn't support canvas, which is required for this demo."  
  21.       ).appendTo( "#graphs" );  
  22.       return;  
  23.     }  
  24.   var i = 0,  
  25.       width = 100,  
  26.       height = 100;  
  27.  $.each( $.easing, function( name, impl ) {  
  28.       var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),  
  29.         text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ),  
  30.         wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ),  
  31.         canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ];  
  32.   canvas.width = width;  
  33.       canvas.height = height;  
  34.       var drawHeight = height * 0.8,  
  35.         cradius = 10;  
  36.         ctx = canvas.getContext( "2d" );  
  37.       ctx.fillStyle = "black";  
  38.  // draw background  
  39.       ctx.beginPath();  
  40.       ctx.moveTo( cradius, 0 );  
  41.       ctx.quadraticCurveTo( 0, 0, 0, cradius );  
  42.       ctx.lineTo( 0, height - cradius );  
  43.       ctx.quadraticCurveTo( 0, height, cradius, height );  
  44.       ctx.lineTo( width - cradius, height );  
  45.       ctx.quadraticCurveTo( width, height, width, height - cradius );  
  46.       ctx.lineTo( width, 0 );  
  47.       ctx.lineTo( cradius, 0 );  
  48.       ctx.fill();  
  49.  // draw bottom line  
  50.       ctx.strokeStyle = "#555";  
  51.       ctx.beginPath();  
  52.       ctx.moveTo( width * 0.1, drawHeight + .5 );  
  53.       ctx.lineTo( width * 0.9, drawHeight + .5 );  
  54.       ctx.stroke();  
  55. // draw top line  
  56.       ctx.strokeStyle = "#555";  
  57.       ctx.beginPath();  
  58.       ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );  
  59.       ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );  
  60.       ctx.stroke();  
  61.  // plot easing  
  62.       ctx.strokeStyle = "white";  
  63.       ctx.beginPath();  
  64.       ctx.lineWidth = 2;  
  65.       ctx.moveTo( width * 0.1, drawHeight );  
  66.       $.each( new Array( width ), function( position ) {  
  67.         var state = position / width,  
  68.           val = impl( state, position, 0, 1, width );  
  69.         ctx.lineTo( position * 0.8 + width * 0.1,  
  70.           drawHeight - drawHeight * val * 0.7 );  
  71.       });  
  72.       ctx.stroke();  
  73.  // animate on click  
  74.       graph.click(function() {  
  75.         wrap  
  76.           .animate( { height: "hide" }, 2000, name )  
  77.           .delay( 800 )  
  78.           .animate( { height: "show" }, 2000, name );  
  79.       });  
  80.  graph.width( width ).height( height + text.height() + 10 );  
  81.     });  
  82.   });  
  83.   </script>  
  84. </head>  
  85. <body>  
  86.  <div id="graphs"></div>  
  87.  </body>  
  88. </html>