如何将时间戳补间到特定时间

Question

我在屏幕上有一个带有时间的假时钟：

<div class="time">9:14<sup>am</sup></div>

我想制作一个函数来将那个时间补间到另一个任意时间，这样时钟实际上会经过秒和小时，直到到达新时间（伪代码）：

var currentTime = {
  time: 9:14am
}
function changeTime(newTime){
  TweenMax.to(currentTime,.5,{
    time: newTime
  });
}

changeTime(12:32pm);

所以在上面的例子中，分钟数会增加一直到达到 60，然后小时数增加一并重置为零，然后再次增加到 60，依此类推，直到达到 12:32 （上午在 12:00pm 切换到下午）。

有没有办法用 tweenmax 和时间戳来做到这一点？或者我需要构造一个自定义函数吗？或者有没有更好的补间方式？

Answer 1

你可以使用这样的东西（并改进它，我很快就做到了）。

<script>
        var hour, minute, second, meridian, isAm;
        isAm = true;
        hour = 0;
        minute = 0;
        second = 0;

        function timerLoop () {
            second++;

            if(second > 59) {
                second = 0;
                minute++;
            }

            if(minute > 59) {
                minute = 0;
                hour++;
            }

            if(hour >12) {
                hour = 1;
                isAm = !isAm;
            }

            // update labels
            meridian = 'a.m.';
            if(!isAm) meridian = 'p.m.';
            console.log(hour + ':' + minute + ':' + second + ' ' + meridian);

            setTimeout(function() {
                timerLoop();
            }, 1000);
        }


        timerLoop();
    </script>

我只测试了 2 分钟，但那部分工作正常。您可能希望在个位数前添加前导零，因为我还没有这样做。一旦达到你想要的运行，你就可以考虑添加动画或淡入淡出以使其样式更好一些。

如何将时间戳补间到特定时间

How to tween a timestamp to a specific time

javascript

animation

timestamp

tween

gsap