Question

我正在尝试制作新的Chrome扩展程序，我需要图标自动更改为带有图像数组的gif，并永远重复。我的问题是我无法使Javascript循环起作用。这就是我所拥有的：

var min = 1;
var max = 12;
var current = min;

  if (current > max)
    current = min;
}

var keep_switching_icon = true;
function rotateIcon()
{               
   if ( keep_switching_icon )
   {
      chrome.browserAction.setIcon({path:"icon" + current + ".png"});
      current++;
      window.setTimeout(rotateIcon, 300);
   }
}

Answer 1

我可以使用setInterval为我的徽章图标设置动画。在这里查看完整帖子：https://timleland.com/animated-badge-icon/

setInterval(function() {
  var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;
  context.save();
  context.clearRect(0, 0, cW, cH);
  context.translate(cW / 2, cH / 2);
  context.rotate(Math.PI * 2 * rotation);
  for (var i = 0; i < lines; i++) {
    context.beginPath();
    context.rotate(Math.PI * 2 / lines);
    context.moveTo(cW / 10, 0);
    context.lineTo(cW / 4, 0);
    context.lineWidth = cW / 30;
    context.strokeStyle = 'rgba(0, 0, 0,' + i / lines + ')';
    context.stroke();
  }

var imageData = context.getImageData(10, 10, 19, 19);
  chrome.browserAction.setIcon({
    imageData: imageData
  });

context.restore();
}, 1000 / 30);

Answer 2

应该做一些改变：

检查是否应在功能

current > max

console.clear();

var min = 1;
var max = 12;
var current = min;

var keep_switching_icon = true;

function rotateIcon() {
  if (keep_switching_icon) {
    //chrome.browserAction.setIcon({path:"icon" + current + ".png"});
    console.log(current);
    if (current++ > max) {
      current = min;
    };

    window.setTimeout(rotateIcon, 300);
  }
}

rotateIcon();

只需代替console.log(current)，取消注释chrome.browserAction函数调用并删除第一行。

制作动画Chrome扩展程序图标？

2 个答案: