Question

您好

我正在制作扩展程序，并希望在点击扩展程序时旋转图标。我不知道如何开始。我想我需要一个清单和一个java脚本文件，但我无法工作......

-Ekrcoaster

到目前为止

代码：

function updateIcon(back) {
  if (back) {
    chrome.browserAction.setIcon({path: {
    "16": "icon16.png",
    "32": "icon32.png"}
    });


  } else {
  chrome.browserAction.setIcon({path: {
    "16": "icon.png",
    "32": "icon.png"}
    });


 }}

window.setInterval(rotate, 10);
var i = 0;
function rotate() {
    if(i > -1) {
    i++;
    updateIcon(getPercent2(i));
    //console.log(i);
} else {

}

}

function getPercent2(number) {
   var x = number % 2
   if(x == 1) {
    return true;
   } else {
    return false;
   }

}

我尝试了图像，但我无法将图像加载到.....

Answer 1

模仿图标动画的唯一可能方法是每隔一定时间更改扩展图标图像（只要它在视觉上需要它就能看起来平滑）。

如果旋转一次改变10度，您将需要1个图像来匹配每个可能的旋转角度，那么您将需要36个不同的图像（360/10）。

可能的尝试将是这样的

var degree = 0;

function rotate() {
  /* we update the icon to the current rotation degree */
  var path = 'icon' + degree + '.png';
  chrome.browserAction.setIcon({ path: path });

  /* we update the rotation degree adding 10 or setting back to 0 */
  degree = degree === 360 ? 0 : degree + 10;

  /* we use recursivity here to keep animating */
  setTimeout(rotate, 200);
}

/* start */
rotate();

如果需要，您还可以添加一个布尔值来检查并结束循环。

Chrome扩展程序的旋转效果

1 个答案: