視差の動きにイージングを追加するにはどうすればよいですか?

Question

いくつかの画像に視差効果を適用しており、それらにイージングを適用したいと考えています。視差のロジックは非常に単純です。ウィンドウの中心から画像までの距離を計算し、これを 1 の係数として表します。つまり、0 が画面の中央、1 が画面の下部になります。これを画面の上半分に適用して、-1 が一番上になるようにすることもできます。

理想的には、ここからいくつかの関数を接続するだけです (http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js) まっすぐに入ります。したがって、「easeOutSine」を使用したいと仮定します。

// t: current time, b: begInnIng value, c: change In value, d: duration function (x, t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }

どのような値を渡せばよいでしょうか?これらは継続時間ベースのアニメーションではないため、最も分かりにくいのは d (継続時間) だと思います。これらの方程式は本当に適切なのでしょうか?

注記：ライブラリは使用したくありません。これは純粋な JS です。

Answer 1

これは自分で考えました。私のコードをすべて投稿するつもりはありませんが、その要点は次のとおりです。

function easeInQuart(t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
}

var deltaY // The distance the element is from the bottom of
           // the screen expressed as a factor of 1

var origY // The original position
var distanceY // The distance it can move
var y = easeInQuart(deltaY, origY, distanceY, 1);