Math 如何将计时函数从线性转换为立方Bézier?

Math 如何将计时函数从线性转换为立方Bézier?,math,animation,timing,Math,Animation,Timing,我有一个动画序列,显示一个又一个特定帧。最初的规格是: 我们将为您提供动画的总持续时间 将每个连续帧的显示时间缩短20毫秒 所以我写了这个线性定时函数: /** * Get the delay until the next animation frame. * * @returns the number of ms until the next animation frame. */ getNextTiming: function () { var n = this.getLen

我有一个动画序列,显示一个又一个特定帧。最初的规格是:

我们将为您提供动画的总持续时间 将每个连续帧的显示时间缩短20毫秒 所以我写了这个线性定时函数:

/**
 * Get the delay until the next animation frame.
 *
 * @returns the number of ms until the next animation frame.
 */
getNextTiming: function () {
    var n = this.getLength(), // total number of frames
        t = this.animationDuration,
        x = this.durationDelta, // 20 ms, according to spec
        d = ((n * n * x) - (n * x) + (2 * t)) / (2 * n),
        c = this.cursor; // current frame
    // d is the duration of the first frame of animation.
    return d - c * x;
},
当然,艺术家们并不高兴。他们希望动画跟随曲线。当然,他们不知道确切的曲线是什么,所以我需要写一些我可以在数字上调整的东西,直到他们满意为止。在我看来,我应该研究三次Bézier函数,但我能找到的函数要么有我发现难以解析的抽象符号,要么它们被定义为pt,而不是Δt/Δp


我过去数学很好,但现在我陷入困境。我可以往正确的方向推一推。如何重写上述函数,以便将立方贝塞尔控制点P1和P2输入,并将每个连续帧的时间作为输出?

您能更具体一点吗?贝塞尔曲线是域[0,1]上的函数。但是你要求的是一个计时列表,这是一个域{0,1,2,…}上的函数。@RaymondChen嗯……这是一个很好的观点。如果我们重新定义上面的值,使n=1和t=1,并允许其余的值是分数,会怎么样?然后,为了得到真实世界的值,我只需将输出乘以总动画持续时间(以毫秒为单位)。这是否足以使其正常化?如果需要将每个帧的持续时间减少一个固定的量,这是一个线性函数。无论你对什么样的曲线建模,结果都是线性的。持续时间[n]=初始持续时间-20*n@belisarius符合事实的我们需要扔掉固定时间的三角洲。@kojiro那么,用什么替代品呢?