Chrome 扩展的旋转效果

过山车

你好,

我正在开发一个扩展程序,并希望当您单击扩展程序时该图标会旋转。我不知道如何开始。我想我需要一个清单和一个 java 脚本文件,但我什么也做不了....

-过山车

到目前为止的代码:

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

}

我尝试了图像,但我也无法加载图像.....

马约洛

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

您将需要 1 张图像来匹配每个可能的旋转角度,如果旋转一次改变 10 度,那么您将需要 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();

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章