如何为视差运动添加缓和?

时间:2014-07-31 10:37:11

标签: javascript easing easing-functions

我正在对某些图像应用视差效果,我想对它们应用缓动。视差的逻辑非常简单,我正在计算图像距窗口中心的距离,并将其表示为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。

1 个答案:

答案 0 :(得分:2)

自己想出来。没有发布我的所有代码,这里是它的要点:

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);