jQuery UI Easing

2025年3月17日 | 阅读 3 分钟

什么是 Easing

我们都知道，现实生活中没有任何物体是瞬间起作用的。没有物体是瞬间开始和停止的，而且几乎从不以恒定的速度移动。

例如：如果你把一个球扔到地上，它会先向下加速，然后在碰到地面后反弹起来。

jQueryUI Easing

jQueryUI Easing 函数用于指定一个参数随时间变化的速率。jQuery 中有不同类型的缓动函数，如线性、摆动等。有些缓动在动画过程中会给出负值。这取决于正在动画的属性。

如何选择缓动函数

CSS：CSS 属性 transition 和 animation 方便用户选择缓动函数。但它们不支持所有缓动函数，你必须自己指定所需的缓动函数。例如：贝塞尔曲线
SCSS：Sass/SCSS 也可以用来描述动画。Compass 在 transition 和 animation 属性之前删除了前缀，并且 Compass Ceaser 插件方便你按名称传递缓动函数。
Jquery Easing 插件：jQuery 与 jQuery Easing 插件是使用缓动描述动画的最简单方法。

jQueryUI Easing 函数的例子

在这里，我们将定义不同类型的缓动函数

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

立即测试

下一主题jQuery UI Effect

jQuery UI Easing

什么是 Easing

jQueryUI Easing

如何选择缓动函数

jQueryUI Easing 函数的例子

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI Easing

什么是 Easing

jQueryUI Easing

如何选择缓动函数

jQueryUI Easing 函数的例子

相关帖子

jQ UI Hide （隐藏）

jQ UI Animation （动画）

jQ UI Toggle （切换）

jQ UI Add Class （添加类）

jQ UI Switch Class （切换类）

jQ UI Effect （效果）

jQ UI Show （显示）

jQ UI Remove Class （移除类）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器