1

我的场景中有一个立方体，我想以特定的起始速度和给定的时间间隔旋转它。
此外，立方体的结束角度应与开始角度相同。因此，我想允许时间间隔有± 5% 的偏差。

这是我目前的状态：http: //jsfiddle.net/5NWab/1/。
不要怀疑目前正在工作。如果我更改时间间隔，例如通过“3000”：http: //jsfiddle.net/5NWab/2/ ，就会出现问题。

我的立方体的基本move()方法：

Reel.prototype.move = function (delta) {
    if (this.velocity < 0 && this.mesh.rotation.x == 0) {
        return false;
    }

    // Create smooth end rotation
    if (this.velocity < 0 && this.mesh.rotation.x != 0) {
        this.mesh.rotation.x += Math.abs(delta * this.speedUp * 0.5 * this.timeSpan);
        if (Math.abs(this.mesh.rotation.x - 2 * Math.PI) < 0.1) {
            this.mesh.rotation.x = 0;
        }
    }

    else {
        this.mesh.rotation.x += delta * this.velocity;

        this.time -= delta;
        this.velocity = this.speedUp * this.time;
    }
}

问题是我想不出一个解决方案或方法来完成我的主题。delta如果我的变量是恒定 的，它就不会那么复杂了。
它应该在附近， 60fps = 1000/60因为我正在使用requestAnimationFrame().

我还发现了这个问题，它可以帮助找到解决方案。

我认为代码应该要么

  • 在到达实际终点之前减慢速度。 如果最终角度略大于所需（开始）角度，
    则应该是这种情况。

  • 或应在达到实际终点后加快转速。 如果最终角度比所需（开始）角度小一点
    ，则应该是这种情况。

但是，当角度与所需角度（即 180° 或 PI）相差一个半圆时是什么情况？

为了澄清我的问题，以下是我的已知和未知数：

已知：

  • 起始速度
  • 时间间隔
  • 起始角度（通常为 0）

我希望立方体在旋转结束时具有相同的起始角度/位置。因为 FPS 计数不是恒定的，我必须缩短或延长时间间隔才能让立方体进入所需位置。

4

2 回答 2

1

这是一种可能的方法，虽然它不像我想要的那么好：http: //jsfiddle.net/5NWab/8/

这个想法是逐渐降低速度，就像你做的那样，根据剩下的时间量，直到你到达一个点，立方体必须旋转才能达到它的起始旋转 (0) 变得大于或等于在给定当前速度和当前剩余时间的情况下可能进行的旋转量。在那之后，忽略剩余的时间，并根据剩余的旋转量按比例减慢速度。

这对某些人来说效果很好timeSpans，但对于其他人来说，结束减速动画需要一点时间。

于 2012-09-27T22:12:40.993 回答
1

如果您希望旋转在特定时间以特定角度结束，那么我建议您不要像当前代码（2012-09-27）那样不断减少旋转，而是在初始化时设置目标时间和旋转动画并计算帧重新计算时的正确旋转。

因此，如果您正在做一个正弦形速度曲线（缓进缓出，中间线性，很好的原生函数来计算它），那么（伪代码不使用您的变量）：

//in init
var targetTime = now + animationTime;
// normalize the length of the sine curve
var timeFactor = pi/animationTime;
var startAngle = ...
var endAngle = ...
var angleChange = endAngle - startAngle;

// inside the animation, at some time t
var remainingT = targetTime - t;
if(remainingT <= 0) {
    var angle = endAngle;
} else {
    var angle = startAngle + cos(remainingT * timefactor) * angleChange;
}

[编辑添加 startAngle 到 andle 计算]

因为 cos 函数是奇数（即关于原点对称），当 t 接近 targetTime 时，剩余的 T 接近零，我们在曲线上从 pi 向后移动到 0。sin 形状的曲线向零（和 pi）变平，因此它会在最后（并且在开始时）缓和。在 targetTime 处或之后有一个明确的角度归零，因此帧速率中的任何抖动都不会不要只是将其推入无限循环。

于 2012-09-27T22:27:44.123 回答