根据窗口的滚动值计算旋转和平移位置

Question

我希望在我的情况下移动对象，沿着页面上显示的曲线逐行滚动，考虑滚动值的数量。首先，对象沿直线移动，然后在一个点之后改变方向并向那个方向移动。如何计算这些坐标？

Answer 1

有两种方法可以获得这个。我会尝试详细解释。

场景1：问题中的简单路径。

场景2：任意复杂路径。

场景1： 在这种情况下，您可以使用简单的公式。我们选择y = -x^2。这将产生抛物线，其形状与问题中的路径类似。以下是下一步做什么的步骤（我们假设你的滚动元素是body标签，我假设你有jquery）：

1. 使用以下代码获取正文的“y”值：

   var y = $("body").scrollTop();

2. 将此值插入公式中。我将给出3个例子，其中y分别为0,100和225.

   //y=0 0 = -x^2 -x = sqrt(0) x = +/- 0

   因此，如果我们滚动并且我们位于页面的顶部，则x将为零。

   //y=100 100 = -x^2 -x = sqrt(100) x = +/- 10

   方程式将x作为负x的正数，但我们只想要正数，所以请确保Math.abs（）结果。

   //y=225 225= -x^2 -x = sqrt(225) x = +/- 15

   从这里你可以看到，我们向下滚动越多，对象就越向右移动。

3. 现在将对象的“左”css设置为计算值。这对于这种方法应该足够了。

场景2 对于更复杂的路径（甚至是随机路径），您应该提前将x值放入数组中。假设您随机生成数组，最终得到以下x值：

var xvals = [0, 0.5, 1, 0.5, 0];

我们使用标准化的x值，以便我们以后可以独立于屏幕大小计算位置。这一系列特定值将使对象在屏幕上从左到右，然后从左到右进行曲折。

下一步是确定我们的滚动位置相对于总滚动可能性的位置。可以说我们的页面高度为1000像素。 So if the scoll position is at zero then x = 0. If scroll = 500 then x = screenWidth. If scroll = 250 then x = 0.5 * screenWidth等。

在示例中，为简单起见，我不会与屏幕宽度相乘。但是考虑到x值，这应该很简单。

你现在要做的第一件事就是一个强大的功能。有很多示例代码，所以我相信你的一部分。基本上它是一个看起来像这样的函数：

function lerp(from, to, prog);

其中from和to是可以想象的任何值，prog是介于0和1之间的值。如果from为100且为200，则prog值为0.5将产生150的返回值。

所以我们从这里开始：

1. 获取滚动值作为标准化值

   // scrollval = 200 var totalScroll = 1000; var normScroll = scrollval/totalScroll; // answer is 0.2

2. 在我们到达lerp之前，我们首先需要让x值从lerp到lerp。要做到这一点，我们必须做一些lerping来获取xvals数组的正确索引：

   // normScroll = 0.2 var len = xvals.length; // 5 var indexMax = Math.ceil((len-1) * normScroll); // index = 1 var indexMin = Math.floor((len-1) * normScroll); // index = 0

   现在我们知道两个lex之间的值。它们是xvals[0]，为0，xvals[1]为0.5;

3. 但这还不够信息。我们还需要确切的leprping“prog”值：

   // We continue from the x indeces scrollRange.x = totalScroll / len * indexMin; // 0 scrollRange.y = totalScroll / len * indexMax; // 250 var lerpingvalue = (scrollVal - scrollRange.x) / (scrollRange.y - scrollRange.x);// 0.8

   现在我们终于拥有了我们需要的一切。现在我们知道我们需要xvals[0]和xvals[1]之间的值，并且这两个值之间的值为80％。

4. 所以最后我们lerp：

   var finalX = lerp(xvals[0], xvals[1], lerpingvalue);// 0.4

5. 现在我们知道x坐标是屏幕总尺寸的0.4。

6. 在每个滚动事件上触发这些计算，您应该在路上。

我希望这很清楚。如果您尝试尝试并且无法获得结果并且可以显示您的努力程度，那么我将很乐意为您编写完整的index.html样本。祝你好运！

编辑：我在lerpingval计算中犯了一个错误。现在修好了。