Question

我有一张看起来像的桌子

duration/ms color
10 red
16 yellow
10 red
20 blue
...

我希望我的形状在duration-color表格后显示颜色，并在到达终点时从头开始重新显示。

我如何要求js等待10ms？我尝试过

1。编写遍历表的循环，并使用Date.now（）控制过渡

while (true) {
    startingTime = Date.now()
    duration = table[index]
    while (Date.now() < startingTime + duration) {
        continue
    }
    //changeColor
    //updateIndex
}

太费力了。炸毁了我的浏览器。

2.setTimeout

var index = 1
var updateColor = function() {
    //updateshapecolor(color_table[index])
    //updateinex
    setTimeout(updateColor, duration_table[index])

}
updateColor()

适用于小桌，但是在大桌中确实很慢，最终使堆栈崩溃。

什么是更好的做法？有人可以建议吗？

Answer 1

这种简单的动画可以在CSS中完成，而对浏览器的压力要小得多。这是一个示例，该示例使用您的数据构建具有正确动画设置来更改“颜色”的样式表。您可能需要更改“背景颜色”或其他内容。

//Your data
var data = [
  {color: "red", ms: 10},
  {color: "yellow", ms: 16},
  {color: "red", ms: 10},
  {color: "blue", ms: 20}
];

// calculate the total time
var totalms = data.reduce((acc,obj) => acc + obj.ms, 0);

var runningtot = 0;

// build the keyframes
var style = data.reduce((str,obj) => {
  var pct = runningtot / totalms * 100;
  runningtot += obj.ms;
  str += pct + "% { color: " + obj.color + "; }";
  return str;
}, "");

var totallength = totalms / 1000 + "s";

// create a class called pulser
style = ".pulser {animation: pulse " + totallength + " infinite;} @keyframes pulse { " + style + " }";

// the stylesheet contents
console.log(style);

// append it to the document
var ss = document.createElement('style');
ss.innerHTML = style;
document.body.appendChild(ss);

<div class='pulser'>Example Text</div>

Answer 2

您可以使用requestAnimationFrame 它不会像infinit循环那样消耗您的性能，因为它仅在1/60秒通过时才调用回调

let index = 0;
let lastTime = 0; /* unix timestamp */

/* draw callback */
/* [curTime] - current time in unix timestamp */
let onDraw = function(curTime) {

    if (curTime > lastTime + table[index])
    {
        /* update state of index */
        index = (index + 1) % table.length;

        /* update state of last time */
        lastTime = curTime;

        /* change color here */
    }

    /* wait for next update */
    requestAnimationFrame(onDraw);
}

/* start the animation */
requestAnimationFrame(onDraw);

如何在js中无限更改间隔表上的形状颜色循环？

2 个答案: