在HTML畫布上單擊停止動畫播放

Question

對在畫布內移動的圖像進行動畫處理，但現在無法暫停運動。 圖像在畫布上移動，一旦單擊眼睛，它應該停止或暫停。 眼睛被定義為HTML圖像圖

我嘗試使用pause（）和clearInterval（），但它們似乎都不起作用。 在這里，大象圖像處於運動狀態，單擊時不可見，但現在我也想在單擊鼠標時暫停運動。

 <html>
        <head>

            <style>

               map{ /*elephant's eye*/
                cursor:default;
                }

                div.b{ /*div of outter box*/
                    width: 850px;
                    height:600px;
                    border: 3px solid blue;
                    float: left;
                }

                div.a { /*div of the elephant box*/
                width: 250px;
                height:250px;
                /*background-color:red;
                border: 1px solid black;*/
                position:fixed;
                cursor:pointer;
                }  

                body { /* body style*/
                cursor:pointer;
                margin: 0px;
                }

                div.c{ /* number box style*/
                width: 150px;
                height:50px;
                border-radius: 5px;
                background-color:red;
                /*border: 1px solid black;*/
                right: 10px;
                float: left;
                color: yellow;
                }

                div.pmenu{ /* pause menu*/
                width: 150px;
                height:50px;
                border-radius: 5px;
                background-color:red;
                /*border: 1px solid black;*/
                margin:0 auto;
                color: yellow;
                }

            </style>

        </head>
        <body>
                <div class='b'  id="clickme">  <!--outter blue box -->
                    <div class='a' id='a'> <!--elephant's box -->
                        <img src="image/download.jpg" alt="elephant" usemap="#elephant" id="img">
                    </div>
                </div>


                <div class="c"> <!--clicks box-->
                    <p id="para">Clicks: 0</p>
                </div>
                <div class="pmenu"> <!--clicks box-->
                    <p id="par">Clicks: 0</p>
                </div>

            <map name="elephant"> <!--eye mark on the elephant -->
                <area class="yellow" shape="rect" coords="10,10,80,80" href="" />
            </map>

        </body>

        <script src="js/jquery-1.7.2.js"></script>
        <script> //Random motion run
            $(document).ready(function(){
                SetOpacity('img', 0);

               animateDiv();
        });
    $(".yellow").on("click", function(e){ //Elephant eye click event
        e.preventDefault();
        SetOpacity('img', 100);
        alert('You won, Play Again?');
        location.reload();
    });

    var button = document.getElementById("clickme") // capture clicks of outter box
    var ps=document.getElementById("para"),
        count = 1;
        button.onmouseup = function() {
            SetOpacity('img', 0);
            if(count<=3){

                ps.innerHTML = "Clicks: " + count;
                count += 1;

            }
            else{
                alert("All tries are over, Try Again?");
                location.reload();
            }
    };

    button.onmousedown = function() {
        SetOpacity('img', 100);


    };
    button.onmousemove= function() {
        SetOpacity('img', 0);

    };

    function SetOpacity( imageid, opacity ) { //Hide the image
        var s= document.getElementById(imageid).style;
        s.opacity = ( opacity / 100 );
        s.MozOpacity = ( opacity / 100 );
        s.KhtmlOpacity = ( opacity / 100 );
        s.filter = 'alpha(opacity=' + opacity + ')'; // this is for Internet explorer
    }

    function makeNewPosition(){ //Define random positions by height and width

        // Get viewport dimensions (remove the dimension of the div)
        var h = $(".b").height() -280;
        var w = $(".b").width() - 220;

        var nh = Math.floor(Math.random() * h);
        var nw = Math.floor(Math.random() * w);

        return [nh,nw];    

    }

    function animateDiv(){ // motion
        var newq = makeNewPosition();
        var oldq = $('.a').offset();
        var speed = calcSpeed([oldq.top, oldq.left], newq);
        $('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
          animateDiv();        
        });

    };

    function calcSpeed(prev, next) { // Speed calculation of the elephant

        var x = Math.abs(prev[1] - next[1]);
        var y = Math.abs(prev[0] - next[0]);

        var greatest = x > y ? x : y;

        var speedModifier = 0.2;

        var speed = Math.ceil(greatest/speedModifier);

        return speed;

    }





        </script>
    </html>

Answer 1

我可以想到幾種方法，但是從本質上講，通過調用函數本身，您已經完成了不可避免的循環。 但是，如果添加了一個條件，該條件會停止函數本身的調用，則它將停止，您可以通過更改停止它的條件並再次調用該函數來再次啟動它。

function animateDiv(){ // motion
    if(true === doRun) {
        var newq = makeNewPosition();
        var oldq = $('.a').offset();
        var speed = calcSpeed([oldq.top, oldq.left], newq);
        $('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
           animateDiv();
        });
    }        
};

將“ doRun”作為全局參數，您可以在單擊大象時將其切換為TRUE和FALSE，並且將其切換為TRUE時，還可以再次調用“ animateDiv”函數。

上面的方法應該與您實現元素連續移動的方式一起工作，但是就我個人而言，我將使用setInterval（）使其保持運行，然后在單擊時添加/刪除它。

在HTML畫布上單擊停止動畫播放

問題描述

1 個解決方案

解決方案1
0 2019-09-03 09:13:09

在HTML畫布上單擊停止動畫播放

問題描述

1 個解決方案

解決方案1 0 2019-09-03 09:13:09

解決方案1
0 2019-09-03 09:13:09