Question

我正在尝试创建一个从100开始到30结束的倒计时。我希望倒计时的开始非常快，然后减速并停在30点。此时虽然是＆＃34;路径＆＃34;倒计时是线性的。

另外为了让您知道，起始编号和结束编号可能会发生变化，但仍需要曲线时间效果。

$(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来制作时间＆＃34;曲线＆＃34;？

Answer 1

使用某个数字0 <= t <= 1参数化您的计数变量。定期增加（比如0.01）

e.g。对于二次衰变：

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

Answer 2

尽管我很欣赏亲爱的同事们的解决方案，但要求最后停止。所以时间必须达到无限或至少足够接近。

将10 ^ 6作为“足够接近”并将正切函数作为达到无穷大的手段（但不要超越）以及一些简单的代数，并冒昧地将计数函数从减少变为增加我们通过使用一个臭名昭着的漫长而啰嗦的连续句子来完成对完美无知的“芝加哥风格手册”的完全无知，这还有很多多余的补充。

tl; dr：我们需要让x中的tan(x)尽可能接近PI/2，但不要大于达到该目标。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Counter</title>
<script type="text/javascript">
var timer;
var counter = setTimeout(timer, ms);
var ms = 1;

var count_start = 30;
var count_end = 100;
var count = count_start;

// roughly (atan(10^6) - .02) / 68
var step  = 0.0228058;
// to avoid zero
var start = 0.02;

var brk = document.createElement("br");

function Countdown() {
    var out = document.getElementById("output");
    var text;

    if (++count <  count_end) {
        start += step;
        ms =  Math.tan(start) * count;

        counter = setTimeout(Countdown, ms);
        text = count.toString() + " - "  + ms.toString();
        text = document.createTextNode(text);
        out.appendChild(text);
        out.appendChild(brk.cloneNode());
    }
}
</script>
</head>
<body onload="Countdown()">
<p id="output" > </p>
</body>
</html>

减少step中的值会使曲线更早结束（您可以“放大”），例如：step = 0.02让最后一步持续约半秒钟，约{85} {{1} }}

使用Math.PI

2 个答案: