Question

我有一个基于实际时间的完全工作的线性渐变动画，但是动画不是平滑的 - 它每一秒都会改变，因为十六进制每秒都会改变（让我们说它的15:20）：35所以值是：＃152035和＃352015）。

这是我的脚本 - ＆gt;

function background() {
        setInterval(function(){
        var time = new Date();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        if(hours<10){hours = "0" + String(hours);}
        if(minutes<10){minutes = "0" + String(minutes);}
        if(seconds<10){seconds = "0" + String(seconds);} 
        document.getElementById("background").style.background="linear-gradient(#" + hours + minutes + seconds + ", #" + seconds + minutes + hours + ")";
        }, 1000);
    }

    setInterval(function(){
        var time = new Date();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        if(hours<10){hours = "0" + String(hours);}
        if(minutes<10){minutes = "0" + String(minutes);}
        if(seconds<10){seconds = "0" + String(seconds);}
        document.getElementById("time").innerHTML = (hours + ":" + minutes + ":" + seconds);
    }, 1000);

这是我的Html - ＆gt;

<div id="background">
    <div id="time"></div>
</div>

您可以查看结果here

我的想法是将线性渐变的值设置为等于两个值之间的过渡（第一个=实际时间，第二个=实际时间+ 1秒）。

像这样 - ＆gt;

//        time 15:20:35
          linear-transition = (function1() {
            animation("#152035", "#152036");
          }, function2() {
              animation("#352015", "#362015");
           };

+是否可以使用sweep.js实现它？

基于实际时间的线性渐变动画

0 个答案: