Javascript 基于窗口滚动值计算旋转和平移位置

---

在我的例子中，我想移动对象，它是一个平面，沿着页面上显示的曲线滚动，并考虑滚动值的大小。首先，对象沿直线移动，然后在一个点后，它改变方向并朝该方向移动。如何计算这些坐标？

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

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

场景2：任意复杂路径

场景1: 在这种情况下，您可以使用一个简单的公式。让我们使用

y=-x^2

。这将产生一条抛物线，其形状与问题中的路径相似。下面是下一步操作的步骤（我们假设您的滚动元素是body标记，我假设您有jquery）：

使用以下代码获取主体的“y”值：

var y=$（“body”）.scrollTop（）

将此值插入公式。我将给出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的负数，但是我们只想要正数，所以一定要计算结果

/y=225
225=-x^2
-x=sqrt（225）
x=+/-15

由此可以看出，向下滚动的距离越远，对象向右移动的次数就越多

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

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

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

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

下一步是确定滚动位置相对于总滚动可能性的位置。假设我们的页面高度为1000px<代码>因此，如果scoll位置为零，则x=0。如果滚动=500，则x=屏幕宽度。如果scroll=250，则x=0.5*屏幕宽度等

在这个例子中，为了简单起见，我不会与屏幕宽度相乘。但是给定x值，这应该很简单

您现在可能需要准备的第一件事是lerping函数。这里有大量的示例代码等等，所以我相信这一部分。基本上，它是一个如下所示的函数：

function lerp(from, to, prog);

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

因此，我们从这里开始：

获取作为标准化值的滚动值

//scrollval=200
var totalScroll=1000；
var normcroll=scrollval/totalScroll；//答案是0.2

在我们得到lerp之前，我们首先需要得到lerp的x值。为此，我们必须执行某种lerping操作，以获得xVAL数组的正确索引：

//normcroll=0.2
var len=xvals.length；//5.
var indexMax=Math.ceil（（len-1）*normcroll）；//索引=1
var indexMin=数学楼层（（透镜-1）*正常滚动）；//索引=0

现在我们知道了lerp之间的2 x值。它们是

xvals[0]

是0，而

xvals[1]

是0.5

但这仍然是不够的信息。我们还需要准确的lerping“prog”值：

//我们从x索引继续
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%

因此，最后我们将：

var finalX=lerp（xvals[0]，xvals[1]，lerpingvalue）；//0.4

现在我们知道x坐标是总屏幕大小的0.4

在每次滚动事件中触发这些计算，您就可以上路了

我希望这足够清楚。如果您尝试了又尝试，但没有得到结果，并且可以显示您的努力程度，那么我很乐意为您编写一个完整的index.html示例。祝你好运

---

编辑：我在勒平瓦尔的计算中犯了一个错误。现在已修复。

从获取轨迹公式开始。“y=-x^2”如果你用谷歌搜索，它会让你走上正轨。甚至“y=log（-x）”。然后，无论何时滚动，都会得到包含元素的滚动顶部，并将其输入到等式中。如果scrollTop==100，那么：100=-x^2。对于更复杂的路径，可能需要提前指定点并在它们之间插值。如果您需要更多帮助，请告诉我。是的，我理解公式的概念，但更详细的解释会有帮助，比如计算x的值或提前保存这些值等等。我会发布一个答案。我发现我在lerpval计算上仍然有错误。我一有时间就去修。