javascript - 如何为视差运动添加缓动？

Question

我正在对一些图像应用视差效果，我想对它们应用缓动。视差的逻辑非常简单，我正在计算图像与窗口中心的距离，并将其表示为因子 1，其中 0 是屏幕中间，1 是屏幕底部。我也可以将它应用到屏幕的上半部分，因此 -1 将是顶部。

理想情况下，我只想直接插入此处 (http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js) 中的一些函数。假设我希望使用“easeOutSine”:


//t: 当前时间, b: begInnIng 值, c: 变化值, d: 持续时间
函数(x，t，b，c，d){
返回 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);