调低 jQuery 宽松的反弹

Question

我正在使用 jQuery Easing plugin 并使用反弹缓动效果。我喜欢它，但它是如此的激烈。我需要调低它（可能会消除反弹并使曲线不那么剧烈。

我找到了this post，但我其实不是数学专业的...有人可以用英语帮助我吗？我什至不需要完全掌握它，只要有人为我提供一个功能我就可以了。

我知道我应该粘贴我试过的代码，但我什至不知道该尝试什么，所以我想我会 post [=20] 提供的缓动函数=] 缓动插件。

easeOutBounce: function (x, t, b, c, d) {
    if ((t/=d) < (1/2.75)) {
    return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
}

Answer 1

你最好的选择是 find an easing function 接近你想要的并调整持续时间。但是如果你真的想做一些自定义的事情，jQuery 缓动插件可以让你使用以下函数指定时间：

jQuery.easing.newEasingMethodName (
    x, // Ignored
    current_time,
    start_value,
    end_value,
    total_time
)

它在动画的各个点被调用，并且预计 return 与动画经过时间相适应的位置。检查 easeOutBounce，您可以看到每个 if 语句将进度标准化为总时间的百分比（t/=d 片段），并应用 4 个论坛之一来导出当前值作为该百分比的函数。

问题在于这些公式函数不是连续的——它们单独 "tuned" 以在时间轴中那个精确的完成百分比点处另一个函数停止的地方继续。例如，在下面的代码片段中，如果您 select "step"，您会看到动画从一个位置跳到另一个位置，中间没有动画。如果您只是从 easeOutBounce 代码块中取出其中一个 if 语句，就会发生这种情况——它会从一个步骤的结束跳到下一个步骤的开始，该步骤被调整为开始在时间轴的后面部分，因此会导致您的动画到处跳动。

您可以使用下面的 custom 函数作为起点——它只是 easeOutBounce 函数，已重写以使其不那么晦涩。

祝你好运。 :)

var $div = $('#test');
var $easeMethodName = $('#method-name');
var $animationDuration = $('#animation-duration');

$('button').click(function() {
  $div.toggleClass('expanded');
  var width = $div.hasClass('expanded') ? 400 : 200;
  var duration = parseInt($animationDuration.val(), 10);

  $div.animate({
    width: width
  }, {
    duration: duration,
    easing: $easeMethodName.val()
  });

});

var linear = function(ignore, t, start_value, end_value, d) {
  var pct = t/d;
  return pct * end_value;
};
$.easing.linear = linear;

var step = function(ignore, t, start_value, end_value, d) {
  var pct = t/d * 100;
  var step = Math.round(pct / 25);
  return (step * .25) * end_value + start_value;
};
$.easing.step = step;

// This is the eastOutBounce function, rewritten to make it a little 
// easier to read. Use it as a starting point for modification.
// t is the current time; d is the duration of the animation
var custom = function(ignore, t, start_value, end_value, d) {
  var pct = t/d;
  var step1 = 1/2.75; // ~36%
  var step2 = 2/2.75; // ~73%
  var step3 = 2.5/2.75; // ~90%

  if (pct < step1) {
    return end_value*(7.5625*pct*pct) + start_value;
  } else if (pct < step2) {
    return end_value*(7.5625*(pct-=(1.5/2.75))*pct + .75) + start_value;
  } else if (pct < step3) {
    return end_value*(7.5625*(pct-=(2.25/2.75))*pct + .9375) + start_value;
  } else {
    return end_value*(7.5625*(pct-=(2.625/2.75))*pct + .984375) + start_value;
  }
};
$.easing.custom = custom;

#test {
  width: 200px;
  height: 20px;
  border: 1px solid #900;
  background: #ccc;
  position: relative;
  margin-top: 1em;
}

label, button {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<label>Method name: 
  <select id="method-name">
    <option value="linear">Linear</option><option value="step">Step</option><option value="custom">Custom</option><option value="easeInOutBounce">easeInOutBounce</option>
  </select>
</label>

<label>Duration:
  <input id="animation-duration" value="1000" />
</label>

<button>Animate</button>

<div id="test">
</div>

调低 jQuery 宽松的反弹

Tone down jQuery Easing's bounce

javascript

jquery

jquery-ui

easing-functions

jquery-easing