(原)用pixi.js 实现 方块阵点击后原地自转效果

1|0源码

 　　各位，请教一个问题，我这个还有BUG，我是想实现，点击一下可以 停止转动，然后再点一下重新转动。而不是一直加速，有没有什么好办法？

　　 PS:问题已经解决，谢谢评论的大神@Antineutrino ！

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148

https://files.cnblogs.com/files/kmsfan/pixi.js <script src="~/Scripts/pixi.js"></script>   <div id="container"></div>     <script>     var renderer = PIXI.autoDetectRenderer(800, 500, { backgroundColor: 0x1099bb });     $("#container").append(renderer.view);     var stage = new PIXI.Container();       var container = new PIXI.Container();     stage.addChild(container);           var bunnyArray = new Array();       for (var i = 0; i < 5; i++)     {         bunnyArray[i] = new Array();       }       //载入图片     //for (var i = 0; i < 5; i++)     //{     //    for (var j = 0; j < 5; j++)     //    {     //        var bunny = PIXI.Sprite.fromImage("/Content/img/bunny.png");     //        bunny.x = 40 * j;     //        bunny.y = 40 * i;     //        bunny.interactive = true;     //        //bunny.on("mousedown",onClick);                   //        bunnyArray[i][j]=bunny;       //        container.addChild(bunnyArray[i][j]);     //    }     //}       for (var i = 0; i < 5; i++) {         for (var j = 0; j < 5; j++) {             var rect = new PIXI.Graphics();             var width = 70;               rect.lineStyle(1, randomColor());             rect.interactive = true;             rect.hitArea = new PIXI.Rectangle(width * i, width * j, width, width);             rect.drawRect(width * i, width * j, width, width);                           bunnyArray[i][j] = rect;             container.addChild(bunnyArray[i][j]);           }     }       for (var i = 0; i < bunnyArray.length; i++)     {         for (var j = 0; j < bunnyArray[i].length; j++)         {               bunnyArray[i][j].on("click", onClick);         }       }       container.x = 200;     container.y = 60;       renderImage();       function renderImage()     {         requestAnimationFrame(renderImage);         //renderer.render(container);         renderer.render(container);         //renderer.render(stage);     }       function animate() {         requestAnimationFrame(animate);           var bunny1 = thisPointer;           bunny1.rotation += 0.03; 　　　　cancelAnimationFrame(request);                }       function animateErase()     {         //requestAnimationFrame(animateErase);         var bunny1 = thisPointer;         bunny1.rotation -= 0.01;     }       var thisPointer;     var request;     function onClick(eventData)     {                thisPointer = calcuatePos(eventData); 　　　　request = requestAnimationFrame(animate);                    }       //生成随机颜色     function randomColor() {           var colorStr = Math.floor(Math.random() * 0xFFFFFF).toString(16).toUpperCase();           return "000000".substring(0, 6 - colorStr) + colorStr;       }       //判断是否点击了这个东西     function calcuatePos(eve)     {         var x = (eve.data.global.x);         var y = (eve.data.global.y);                     x = x - container.x;         y = y - container.y;             for (var i = 0; i < bunnyArray.length; i++) {             for (var j = 0; j < bunnyArray[i].length; j++) {                   var instance = bunnyArray[i][j];                   if (instance.hitArea.x <= x && instance.hitArea.x + 70 >= x && instance.hitArea.y <= y && instance.hitArea.y+70>=y) {                     instance.x = instance.hitArea.x+70/2;                     instance.y = instance.hitArea.y+70/2;                     instance.pivot.x = instance.hitArea.x+70/2;                     instance.pivot.y = instance.hitArea.y+70/2;                     return instance;                 }                               }           }     }       </script>

2|0效果 

  

 

__EOF__

作　　者：ღKawaii
出　　处：https://www.cnblogs.com/kmsfan/p/4839730.html
关于博主：一个普通的小码农，为了梦想奋斗
版权声明：署名 - 非商业性使用 - 禁止演绎，协议普通文本 | 协议法律文本。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！