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

【问题标题】：How to tween a timestamp to a specific time如何将时间戳补间到特定时间
【发布时间】：2018-01-30 22:00:39
【问题描述】：

我在屏幕上有一个假时钟，上面有一天中的时间：

<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);

因此，在上述情况下，分钟会增加 1 直到达到 60，然后将小时增加 1 并重置为零，然后再次增加到 60，依此类推，直到达到 12:32（上午在中午 12:00 切换到下午）。

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

【问题讨论】：

补间是指从数字到另一个的字面变形过渡？那么其他解决方案，例如旧时钟具有的垂直旋转面板或使用不透明度淡出一个数字并淡入下一个数字不起作用？
不 - 我只需要切换数字 - 它可以是一个数字和下一个数字之间的硬切，甚至不需要褪色。但它需要按分钟和小时顺序进行。

标签： javascript animation timestamp tween gsap

【解决方案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 分钟，但那部分工作正常。您可能希望在个位数上添加前导零，因为我没有这样做。一旦它按照你的意愿运行，你可以考虑添加动画或淡入淡出以更好地设置它的样式。

【讨论】：