javascript - 使用 Math.PI 降低曲线速度

Question

我正在尝试创建一个从 100 开始到 30 结束的倒计时。 我希望倒计时的开始速度非常快，然后放慢速度并在 30 处停止。目前倒计时的“路径”是线性的。

还要提醒您注意的是，开始编号和结束编号可能会发生变化，但仍然需要弯曲的时间效果。

https://jsfiddle.net/ygnvav7c/

$(document).ready(function() {
        var timer;
    var count=100;
    var ms = 1;
    var step = 5;
    var counter = setTimeout(timer, ms);

        Countdown();

    function Countdown() {
        count=count - 1;
        if (count >= 30) {
                        $('#countdown-display').html(count);
                        ms = ms + step;
                        counter = setTimeout(Countdown, ms);
                }
    }
});

如何使用 Math.PI 制作时间“曲线”？

Answer 1

用一些数字参数化你的计数变量 0 <= t <= 1 。以固定间隔递增(例如 0.01)

例如对于二次衰减:

count = count_start + (count_end - count_start) * (1 - t) ^ 2

对于正弦曲线衰减:

count = count_start + (count_end - count_start) * sin(pi * t / 2)

对于指数衰减:

count = count_start + (count_end - count_start) * (1 - k ^ t) / (1 - 1 / k)

哪里k > 1