Flash AS3：如何逐渐限制受鼠标 y 位置影响的对象旋转

Question

我创建了一个Flash应用程序，其中有一个圆圈，沿着它的圆周绘制了圆圈，当鼠标向上或向下移动时它会旋转。旋转直接从鼠标指针的 y 位置绘制。我想做的是对运动进行一定程度的分级，以便鼠标指针向下移动得越远，对运动旋转的影响就越小。

我当前的代码是这样的：

myCircle.rotationZ = e.localY;

是否可以使用某种形式的数学公式来减少鼠标位置的 y 位置越大的旋转量？

谢谢，

eb_dev

Answer 1

好吧，这取决于您想要以多快的速度衰减旋转角度。您可以简单地使用线性衰减。

rot = ((Rmax - Rmin) / (Ymax - Ymin)) * y + ((Rmin * Ymax) - (Rmax * Ymin)) / (Ymax - Ymin)

Above expression will change the rotation angle 'rot' linearly from Rmax to Rmin depending on 'y' value from Ymax to Ymin. The same thing you can do using exponential decay.
Maths behind it:

rot = a * y + b //(where a,b are constants)
first boundary condition
Rmax = a * Ymax + b
second boundary condition
Rmin = a * Ymin + b
Solve above 2 equations to find out a and b.
a = (Rmax - Rmin) / (Ymax - Ymin)
b = ((Rmin * Ymax) - (Rmax * Ymin)) / (Ymax - Ymin) 

Answer 2

有很多种方法可以做你想做的事。基本上，听起来您正在尝试获取线性 Y 坐标并将其转换为曲线。

像这样的东西可能会做你想要的（我对 AS3 有点生疏，所以它需要一些调整，但它应该给你这个想法 - YMMV）：

var distance:Number = (Stage.Height - e.localY) / Stage.Height;
distance = distance * distance;
myCircle.rotationZ = distance * 2 * 3.1415927;

它将距离转换为从 0 到 1 的数字，其中 0 位于底部，1 位于顶部。

然后距离从线性曲线调整为抛物线曲线。

最后我们将值从 0 - 1 范围转换为 0 到 2PI（旋转角度）。

Answer 3

bhups 是对的。这是指数版本
请不要被这个名字吓到，阅读评论并访问维基百科以获得直观的表示:)

var scale:int=360;

var val:数字；

//从指数图中我选择了区间[-5,0]

//查阅http://en .wikipedia.org/wiki/Exponential_function ，右上角的图像

//视觉效果

/*对于值为 0 Math.exp 返回 1；当下降到 -5 时，它返回的

值越来越接近为 0

*/

var IntervalMaxValue:Number=0;

/* 警告！如果将intervalMaxValue更改为不同于0的值，则必须修改公式
*/

var 间隔长度:数量=5;

stage.addEventListener(Event.ENTER_FRAME,handlerEnterFrame);

函数 handlerEnterFrame(e:Event):void{

/*
间隔最大值-间隔长度->我们从 -5

1-(stage.mouseY/stage.stageHeight)) * IntervalLength -> 开始并随着鼠标向下逐渐添加 5 到 0 之间的数字

Math.exp ->对于以 0 刻度结束的间隔，将其转换为 0 到 1 之间的值

->乘以scale即可得到完整的0-360间隔*/

val=Math.exp(intervalMaxValue-intervalLength+((1-(stage.mouseY/stage.stageHeight)) * IntervalLength))*scale;

myCircle.rotation=val;

}

Answer 4

_{（来源：数学东西。 com)}

上图的 x 轴从 -4 到 4，很容易算出 x=-5 的 y 值 - 它几乎为 0 - 所以请考虑这一点阅读以下内容。

请看上图，它是指数函数的图。看看 x 值从 -5 到 0 时它是如何增长的？它不是线性增长，而是在达到 0 时越来越大的增长。这正是您的动画所需要的。

val=Math.exp(intervalMaxValue-intervalLength+((1-(stage.mouseY/stage.stageHeight)) * intervalLength))*scale;

IntervalMaxValue-intervalLength 实际上是 0-5，即 -5

所以我们从 -5 开始！

下一个

当鼠标位于舞台顶部时， stage.mouseY/stage.stageHeight = 0（因为 stage.MouseY 将为 0）；当鼠标位于舞台底部时，stage.mouseY/stage.stageHeight = 1（此时 stage.mouseY 等于 stage） .stageHeight 所以你将 stage.stageHeight 除以 stage.stageHeight ，这将是 1)

对于你的效果，你希望它反转，当你在顶部时为 1，当你在底部时为 0，这就是你必须使用 ( 1-(stage.mouseY/stage.stageHeight))

现在，当鼠标位于顶部时，上述公式返回 1，当鼠标位于底部时，返回 0（与您希望的行为完全一样，当鼠标位于顶部时，会发生很大的旋转）当它到达底部时是一个小的）

现在让我们只使用 Math.exp 部分并看看它的行为

val=Math.exp(intervalMaxValue-intervalLength+((1-(stage.mouseY/stage.stageHeight)) * intervalLength);

当你的鼠标位于顶部时，上面的公式将是 -5+((1-(0))*5( <-- 5 是这里的间隔长度）；这将返回 0。现在看一下图表，对于 x 轴上的 0，您在 y 轴上得到 1

现在让我们看看当鼠标位于底部时会发生什么 。 -5+(1-(1))*5;这将返回-5。对于 x 轴上的 -5，您会在 y 轴上得到非常接近 0 的值，如上图所示。

让我们看看当鼠标位于中间时会发生什么 -5+(1-(0.5))*5;这将返回 -5+2.5，即 -2.5。对于 x 轴上的 -2.5，y 轴上的值更接近 0，而不是 1。这就是指数函数的作用。

正如你所看到的，在这个区间[-5,0]上，指数函数生成从0到1的y值，并且当它接近x值0时，该值的增长更大。

考虑到它生成从0到1的值，当变为 -5 时会下降很多，现在您可以将该值乘以 360，这样您就可以得到一个角度值。

在TOP处，角度值为1*360；

中间：-2.5 的 Math.exp 返回一个接近 0.1 的值，将其乘以 360，得到 36。如果将其与舞台顶部的 360 进行比较，您会发现当鼠标到达中间时，舞台急剧下降。

底部：-5 的 Math.exp 返回一个非常接近 0 的值。将 0 乘以 360，就不会得到角运动。因此，当鼠标位于舞台底部时，旋转值非常接近 0。

希望这一点很清楚，它是在上午 6:53 写的，经过一晚的

欢呼。