To define the rate of change of a parameter concerning time, the jQueryUI Easing function is used. Linear, swing, etc are different types of easing functions in jQuery. Depending on the properties being animated, easing often provides negative value results during the animation.
To choose easing functions:
- CSS: To pick easing functions, the CSS properties transition and animation facilities can be utilized, but with the limitation that they don’t support all easing functions. Thus, the desired easing functions may need to be specified by the user himself. For example, the Bezier curve.
- SCSS: To describe animation, the Sass/SCSS can be used. To remove the prefixes before the transition and animation properties, the Compass can be utilized, and to pass the easing function by name, the Compass Ceaser Plugin facilitates can be used.
- Jquery Easing Plugin: The easiest way to describe animation with easing is the jQuery with the jQuery Easing Plugins.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Easing demo</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://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: 60px;
}
</style>
<script>
$(function() {
if ( !.each( $.easing, function( name, impl ) {
var graph = ( "<div>" ).text( ++i + ". " + name ).appendTo( graph ),
wrap = ( "<canvas>" ).appendTo( wrap )[ 0 ];
canvas.width = width;
canvas.height = height;
var drawHeight = height * 0.9,
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" }, 1000, name )
.delay( 1000 )
.animate( { height: "show" }, 1000, name );
});
graph.width( width ).height( height + text.height() + 10 );
});
});
</script>
</head>
<body>
<div id="graphs"></div>
</body>
</html>
Explanation:
In the above example, we are defining the different types of easing functions.