Js анимировать мяч неправильно, медленнее, чем быстрее, каждый раз - PullRequest
Новая
       5

Js анимировать мяч неправильно, медленнее, чем быстрее, каждый раз

0 голосов
/ 29 октября 2018

Когда я запускаю этот код в первый раз, скорость анимации низкая, а затем каждый раз быстрее. Код перемещает шарик, и после того, как вы прикоснетесь к экрану, шарик направится туда, куда вы прикоснулись.

Но в первый раз он очень медленный, потом каждый раз идет быстрее. Почему?

Я ожидал подобную скорость, не совсем постоянную, но не такую. Также с десятой попытки мяч идет слишком быстро.

Я пробую свой смартфон, не знаю, будет ли он работать на компьютере. 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.point{
    width:10px; height:10px; 
    background-color:green;
    position:absolute;
}
#ball{
    width:10px; height:10px;
    background-color:red;
    position:absolute;
    top:1px; left:50px;
}
</style>

</head>
<body>

<div class="point"></div>
<div id="ball"></div>

<script type="text/javascript">
    window.addEventListener("touchstart", function(e){
       var cx = e.touches[0].clientX;
       var cy = e.touches[0].clientY;
    });

    window.addEventListener("touchmove", function(e){
       var cx = e.touches[0].clientX;
       var cy = e.touches[0].clientY;
       endB = [cx, cy];
    });

    window.addEventListener("touchend", function(e){
       decl();
    });

    function decl(){
       isBmove = true;
       mstep = 2;
       requestAnimationFrame(step);
    }

    function step(ts){
       if (isBmove){
           var dfrein = 25;
           var gb = b.getBoundingClientRect();
           var ang = Math.atan2(endB[1]-gb.top, endB[0]-gb.left);
           var addX = Math.cos(ang)*mstep;
           var addY = Math.sin(ang)*mstep;
           var difX = endB[0]-gb.left;
           var difY = endB[1]-gb.top;
           var dist = Math.sqrt(Math.pow(difX,2),Math.pow(difY,2));
           if(dist < dfrein){
               mstep *= 0.98;
                l("m= "+mstep);
           }
           if (mstep < 1){
               isBmove = false; 
               l("add :"+addX+","+addY);
           }
           b.style.top = gb.top+addY+"px";
           b.style.left = gb.left+addX+"px";
      }
      requestAnimationFrame(step);
    }

    window.requestAnimationFrame = 
    window.requestAnimationFrame 
    || window.mozRequestAnimationFrame 
    || window.webkitRequestAnimationFrame 
    || window.msRequestAnimationFrame; 


    var isBmove = false;
    var endB = [0,0];
    var mstep = 2;
    var b = document.getElementById("ball");
    function l(p){
    console.log(p);
}

</script>
</body>
</html>

Спасибо

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Петар прав. Что бы это ни стоило, вот версия вашего приложения, измененная для работы с событиями мыши. 

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        .point {
            width: 10px;
            height: 10px;
            background-color: green;
            position: absolute;
        }

        #ball {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
            top: 1px;
            left: 50px;
        }
    </style>

</head>

<body>

    <div class="point"></div>
    <div id="ball"></div>

    <script type="text/javascript">
        window.addEventListener("mousedown", function (e) {
            var cx = e.clientX;
            var cy = e.clientY;
        });
        window.addEventListener("mousemove", function (e) {
            var cx = e.clientX;
            var cy = e.clientY;
            endB = [cx, cy];
        });
        window.addEventListener("mouseup", function (e) {
            decl();
        });
        function decl() {
            isBmove = true;
            mstep = 2;
        }
        function step(ts) {
            if (isBmove) {
                var dfrein = 25;
                var gb = b.getBoundingClientRect();
                var ang = Math.atan2(endB[1] - gb.top, endB[0] - gb.left);
                var addX = Math.cos(ang) * mstep;
                var addY = Math.sin(ang) * mstep;
                var difX = endB[0] - gb.left;
                var difY = endB[1] - gb.top;
                var dist = Math.sqrt(Math.pow(difX, 2), Math.pow(difY, 2));
                if (dist < dfrein) {
                    mstep *= 0.98;
                    l("m= " + mstep);
                }
                if (mstep < 1) {
                    isBmove = false;
                }
                l("add :" + addX + "," + addY);
                b.style.top = gb.top + addY + "px";
                b.style.left = gb.left + addX + "px";
            }
            requestAnimationFrame(step);
        }

        requestAnimationFrame(step);

        window.requestAnimationFrame =
            window.requestAnimationFrame
            || window.mozRequestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.msRequestAnimationFrame;


        var isBmove = false;
        var endB = [0, 0];
        var mstep = 2;
        var b = document.getElementById("ball");
        function l(p) {
            console.log(p);
        }

    </script>
</body>

</html>
0 голосов
/ 29 октября 2018

Если я не ошибаюсь, это потому, что вам требуется новый кадр анимации каждый раз, когда вы вызываете прослушиватель событий touchend, таким образом вызывая функцию decl(). Так что, возможно, попробуйте вытащить requestAnimationFrame(step) из decl(). Вот так: 

// Instead of:
function decl(){
  isBmove = true;
  mstep = 2;
  requestAnimationFrame(step);
}
// Try like this:
function decl() {
 isBmove = true;
 mstep = 2;
}
requestAnimationFrame(step)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...