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
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery UI Effects - Easing demo</title>
- <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
- <link rel="stylesheet" href="/resources/demos/style.css">
- <style>
- .graph {
- float: left;
- margin-left: 10px;
- }
- </style>
- <script>
- $(function() {
- if ( !$( "<canvas>" )[0].getContext ) {
- $( "<div>" ).text(
- "Your browser doesn't support canvas, which is required for this demo."
- ).appendTo( "#graphs" );
- return;
- }
- var i = 0,
- width = 100,
- height = 100;
- $.each( $.easing, function( name, impl ) {
- var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),
- text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ),
- wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ),
- canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ];
- canvas.width = width;
- canvas.height = height;
- var drawHeight = height * 0.8,
- cradius = 10;
- ctx = canvas.getContext( "2d" );
- ctx.fillStyle = "black";
- // draw background
- ctx.beginPath();
- ctx.moveTo( cradius, 0 );
- ctx.quadraticCurveTo( 0, 0, 0, cradius );
- ctx.lineTo( 0, height - cradius );
- ctx.quadraticCurveTo( 0, height, cradius, height );
- ctx.lineTo( width - cradius, height );
- ctx.quadraticCurveTo( width, height, width, height - cradius );
- ctx.lineTo( width, 0 );
- ctx.lineTo( cradius, 0 );
- ctx.fill();
- // draw bottom line
- ctx.strokeStyle = "#555";
- ctx.beginPath();
- ctx.moveTo( width * 0.1, drawHeight + .5 );
- ctx.lineTo( width * 0.9, drawHeight + .5 );
- ctx.stroke();
- // draw top line
- ctx.strokeStyle = "#555";
- ctx.beginPath();
- ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
- ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
- ctx.stroke();
- // plot easing
- ctx.strokeStyle = "white";
- ctx.beginPath();
- ctx.lineWidth = 2;
- ctx.moveTo( width * 0.1, drawHeight );
- $.each( new Array( width ), function( position ) {
- var state = position / width,
- val = impl( state, position, 0, 1, width );
- ctx.lineTo( position * 0.8 + width * 0.1,
- drawHeight - drawHeight * val * 0.7 );
- });
- ctx.stroke();
- // animate on click
- graph.click(function() {
- wrap
- .animate( { height: "hide" }, 2000, name )
- .delay( 800 )
- .animate( { height: "show" }, 2000, name );
- });
- graph.width( width ).height( height + text.height() + 10 );
- });
- });
- </script>
- </head>
- <body>
- <div id="graphs"></div>
- </body>
- </html>
No comments:
Post a Comment