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

源码

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

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

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>

效果