javascript - 理解为什么滚动动画有效

Question

我正在我的网站中制作一个scrollTo 功能，并将其基于this answer .因为我不想只是复制和粘贴代码，所以我正在尝试理解它。除了 scrollToX 函数 中的数学部分，我能够理解所有内容(花了我 2 天时间!)。

element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
t01 += speed * step;

我理解实际的数学原理，但我不明白它为什么会起作用。为什么这个数学会产生滚动动画？

JSFiddle

document.getElementsByTagName('button')[0].onclick = function() {
  scrollTo(0, 1000);
}

// Element to move, time in ms to animate
function scrollTo(element, duration) {
  var e = document.documentElement;
  if (e.scrollTop === 0) {
    var t = e.scrollTop;
    ++e.scrollTop;
    e = t + 1 === e.scrollTop-- ? e : document.body;
  }
  scrollToC(e, e.scrollTop, element, duration);
}

// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
  if (duration <= 0) return;
  if (typeof from === "object") from = from.offsetTop;
  if (typeof to === "object") to = to.offsetTop;

  scrollToX(element, from, to, 0, 1 / duration, 20, easeOutCuaic);
}

function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
  if (t01 < 0 || t01 > 1 || speed <= 0) {
    element.scrollTop = xTo;
    return;
  }
  element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
  t01 += speed * step;

  setTimeout(function() {
    scrollToX(element, xFrom, xTo, t01, speed, step, motion);
  }, step);
}


function linearTween(t) {
  return t;
}

function easeInQuad(t) {
  return t * t;
}

function easeOutQuad(t) {
  return -t * (t - 2);
}

function easeInOutQuad(t) {
  t /= 0.5;
  if (t < 1) return t * t / 2;
  t--;
  return (t * (t - 2) - 1) / 2;
}

function easeInCuaic(t) {
  return t * t * t;
}

function easeOutCuaic(t) {
  t--;
  return t * t * t + 1;
}

function easeInOutCuaic(t) {
  t /= 0.5;
  if (t < 1) return t * t * t / 2;
  t -= 2;
  return (t * t * t + 2) / 2;
}

function easeInQuart(t) {
  return t * t * t * t;
}

function easeOutQuart(t) {
  t--;
  return -(t * t * t * t - 1);
}

function easeInOutQuart(t) {
  t /= 0.5;
  if (t < 1) return 0.5 * t * t * t * t;
  t -= 2;
  return -(t * t * t * t - 2) / 2;
}

function easeInQuint(t) {
  return t * t * t * t * t;
}

function easeOutQuint(t) {
  t--;
  return t * t * t * t * t + 1;
}

function easeInOutQuint(t) {
  t /= 0.5;
  if (t < 1) return t * t * t * t * t / 2;
  t -= 2;
  return (t * t * t * t * t + 2) / 2;
}

function easeInSine(t) {
  return -Mathf.Cos(t / (Mathf.PI / 2)) + 1;
}

function easeOutSine(t) {
  return Mathf.Sin(t / (Mathf.PI / 2));
}

function easeInOutSine(t) {
  return -(Mathf.Cos(Mathf.PI * t) - 1) / 2;
}

function easeInExpo(t) {
  return Mathf.Pow(2, 10 * (t - 1));
}

function easeOutExpo(t) {
  return -Mathf.Pow(2, -10 * t) + 1;
}

function easeInOutExpo(t) {
  t /= 0.5;
  if (t < 1) return Mathf.Pow(2, 10 * (t - 1)) / 2;
  t--;
  return (-Mathf.Pow(2, -10 * t) + 2) / 2;
}

function easeInCirc(t) {
  return -Mathf.Sqrt(1 - t * t) - 1;
}

function easeOutCirc(t) {
  t--;
  return Mathf.Sqrt(1 - t * t);
}

function easeInOutCirc(t) {
  t /= 0.5;
  if (t < 1) return -(Mathf.Sqrt(1 - t * t) - 1) / 2;
  t -= 2;
  return (Mathf.Sqrt(1 - t * t) + 1) / 2;
}

Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
<button type="button">To the top</button>

Answer 1

首先，让我引用Robert Penners运动的定义

a motion is a numerical change in position over time.

上面可以写成:

pf = p0 + motion(time)

where:

- p0 = initial position
- pf = final position

运动只有在时间存在时才会存在，因此它是时间的函数。由于任何位置都是通过从初始位置开始的运动到达的，我们也可以说位置是时间的函数，所以

position = f(time)

以上是典型的y = f(x) 2d 函数，让我们暂时假设该函数是一条线并且运动发生超过 1 秒，该函数将绘制为

slope该行由

给出

m = (pf - p0) / (1 - 0) = pf - p0                 (1)

斜率会帮助我们找到px什么时候0 < t < 1因为属于直线的任意两点的斜率都相同，所以

m = (px - p0) / (t - 0) = (px - p0) / t           (2)

替换 (1)在 (2)并找到 px 的值

pf - p0 = (px - p0) / t
t * (pf - p0) = px - p0
px = p0 + (pf - p0) * t

这完全符合您的原始方程式(减号因某种原因在您的方程式中因式分解)

另请注意:

• 如果t = 0然后 px = p0
• 如果t = 1然后 px = pf

现在的值为t ，我们知道 0 <= t <= 1 , 我们可以创建另一个依赖于 t 的函数例如motion(t)具有以下要求:

motion(0) = 0
motion(1) = 1

这些条件必须适用于原始 px方程具有正确的值，最简单的运动函数是线性或恒等函数:

const linear = t => t

另一个函数是二次函数:

const quadratic = t => t * t

位置函数将是

px = p0 + (pf - p0) * motion(t)

你会发现很多 easing functions over the internet ，最后，我们知道 t 的值(value)给定初始时间，将与耗时成比例地增加 t0我们可以计算下一次tf具有相同的运动定义

tf = t0 + delta(t)

现在如果你想加快/减慢你的动画，你只需要乘以delta(t)编号 k , 如果 k > 1那么动画会发生得更快k < 1动画会发生得更慢，因此:

px = p0 + (pf - p0) * motion(t0)
tf = t0 + k * delta(t)
// the final time will be the initial time for the next iteration
t0 = tf

例如，如果您希望动画在 0.5 秒内发生(快两倍)k = 2 , 如果持续时间为 2.0 秒(慢两倍)k = 0.5 , 计算 k 值的公式然后是:

k = 1 / duration