0

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;
    }
}
4

1 に答える 1

1

あなたの最善の策は、あなたが望むものに近いイージング関数を見つけて、持続時間を微調整することです。ただし、本当に何かカスタムを行いたい場合は、jQuery イージング プラグインを使用すると、次の関数を使用してタイミングを指定できます。

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

アニメーションのさまざまな時点で呼び出され、アニメーションの経過時間に適した位置を返すことが期待されます。を調べるeaseOutBounceと、各ifステートメントが進行状況を合計時間 (t/=dスニペット) のパーセンテージとして正規化し、4 つのフォーラムの 1 つを適用して、そのパーセンテージの関数として現在の値を導き出すことがわかります。

問題は、これらの数式関数が連続していないことです。それらは、タイムラインの正確な完了率ポイントで他の関数が中断する場所を拾うように個別に「調整」されています。たとえば、以下のスニペットで「ステップ」を選択すると、アニメーションが介在することなく位置から位置へジャンプすることがわかります。ifこれは、単純にステートメントの 1 つをコード ブロックから取り出した場合に発生することです。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>

于 2015-01-02T17:26:56.890 に答える