jQuery UI缓和 jQueryUI缓和|jQueryUI

本文概述

什么是缓和
jQueryUI缓和
如何选择缓动功能
jQueryUI缓动函数示例

什么是缓和我们都知道, 现实生活中没有任何物体可以立即起作用。没有物体会立即启动和停止, 并且几乎永远不会以恒定速度运动。
例如：如果你将一个球扔在地上, 它将首先向下加速, 然后在击中地面后弹回。
jQueryUI缓和jQueryUI缓动函数用于指定参数相对于时间的变化率。 jQuery中有不同类型的缓动函数, 例如线性, 摆动等。某些缓动在动画过程中将其结果提供负值。它取决于正在设置动画的属性。
如何选择缓动功能

CSS：CSS属性过渡和动画使用户可以选择缓动功能。但是它们不支持所有缓动功能, 你必须自己指定所需的缓动功能。例如：贝塞尔曲线
SCSS：Sass / SCSS也可以用来描述动画。 Compass会删除过渡和动画属性之前的前缀, 而Compass Ceaser插件可帮助你按名称传递缓动功能。
jQuery轻松插件：带有jQuery轻松插件的jQuery是描述动画的最简单方法。

jQueryUI缓动函数示例【jQuery UI缓和】在这里, 我们将定义缓动函数的不同类型

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Effects - Easing demo< /title> < link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> < script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js"> < /script> < script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js"> < /script> < link rel="stylesheet" href="http://www.srcmini.com/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>

立即测试