Снизить отказов JQuery Easing

Question

Я использую плагин JQuery Easing и использую эффект ослабления отказов. Мне это нравится, но это невероятно радикально. Мне нужно смягчить его (возможно, удалив отскок и сделав кривые менее резкими.

Я нашел этот пост, но на самом деле я не математик... Может кто-нибудь помочь мне на английском? Мне даже не нужно полностью понимать это, я буду в порядке с кем-то, просто предоставляющим мне функцию.

Я знаю, что должен вставить код, который пробовал, но я даже не знаю, что попробовать, поэтому я предполагаю, что выложу функцию замедления, предоставляемую плагином jQuery Easing.

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

Лучше всего найти функцию смягчения, близкую к тому, что вы хотите, и настроить длительность. Но если вы действительно хотите сделать что-то нестандартное, плагин jQuery easing позволяет указать время с помощью следующей функции:

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

Он вызывается в различных точках анимации и должен возвращать позицию, соответствующую истекшему времени анимации. Изучение easeOutBounce Вы можете видеть, что каждый if заявление нормализует прогресс в процентах от общего времени (t/=d фрагмент) и применяет один из 4 форумов для получения текущего значения как функции этого процента.

Проблема заключается в том, что эти функции формул не являются непрерывными - они индивидуально "настроены", чтобы определить, где находится другая точка в этом точном процентном доле завершения на временной шкале. Например, в приведенном ниже фрагменте, если вы выберете "шаг", вы увидите, что анимация переходит с позиции на позицию без промежуточной анимации. Вот что произойдет, если вы просто возьмете одну из if заявления из easeOutBounce блок кода - он пропустил бы от окончания одного шага до начала следующего, который был настроен для запуска на более поздней части временной шкалы, и поэтому ваша анимация могла бы перепрыгнуть повсюду.

Вы можете использовать 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>