Question

我觉得我觉得它是一个错误的模拟器的基础，但我没有得到我想要的动画运动。

使用画布在动画中创建移动流体动作时，最佳方法是什么。

我是javascript的新手并且只是搞乱，因此欢迎任何改进我的编码标准的建议。

由于

HTML

<canvas width="578" height="200"  margin="3px" id="targer" style="border: 1px solid black;"></canvas>

JAVASCRIPT

var canvas = document.getElementById('targer');

  function bugObj(x, y, size) { 
        this.x = x;
        this.y = y;
        this.size = size;
        this.update = function(move) {
            var p = Math.floor((Math.random()*3)-1) + this.x;
            var q = Math.floor((Math.random()*3)-1) + this.y;
            if (p > canvas.width) { p = canvas.width };
            if (p < 0)   { p = 0 };
            if (q > canvas.height) { q = canvas.height };
            if (q < 0)   { q = 0 };

            this.x = p;
            this.y = q;
        }
        return this;
    }

    function popBugs(){
        var bug;                
        var ctv = canvas.getContext('2d');  
        ctv.fillStyle = 'black';
        ctv.fillRect(0, 0, canvas.width, canvas.height);
        for(var i = 0; bug = bugs[i]; i++) {                
            ctv.fillStyle = 'yellow';
            ctv.fillRect (bug.x, bug.y, bug.size, bug.size);                
        }

    }

    var bugs = [],
        numberbugs = 100,
        x,y;

    for (var i = 0; i < numberbugs; i++){
        x = Math.random()*canvas.width;
        y = Math.floor(Math.random()*canvas.height);
        bugs.push(new bugObj(x, y, 2)); 
    }

    function loop() {

        /// update each bugs objects
        for(var i = 0;i < bugs.length; i++) bugs[i].update();           

        popBugs();

        requestAnimationFrame(loop);
    }

    loop();

    window.requestAnimationFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              function( callback ){
                window.setTimeout(callback, 1000);
              };
    })();

Answer 1

尝试使动画更流畅的几件事：

让动作变小。
不要一次黑掉所有的bug，然后重绘它们。将每个bug弄黑并立即将其重绘为黄色。依次做每个bug。
跟踪错误上次移动的方式，只允许它向该方向移动或向任一侧移动90度。
将10个组中的错误设置为10个，并为每个组设置一个计时器。这可以防止错误动作与其他错误同步，并且可能看起来更好。

Answer 2

我猜你在这里要做的是让虫子从一个地方顺利地飞到另一个地方，而不是像现在一样摇晃。

有一百万种不同的方法可以做到，但这就是我要做的事情。这也是一个开始，只是开始使用目的地而不是逐帧移动。

第一次在任何bug对象上调用update时，我会生成一个随机的DESTINATION。
每次在此之后调用更新功能时，都会将错误移至该位置。为了使它更好，为每个bug分配一个随机的SPEED，或调查某些类型的缓动函数（即在每个帧中，找到bug和目标之间的中间点并将其移动到那里将产生缓和效果。）
每次调用更新功能时，您还会检查错误是否已到达目的地。如果有，那么创建一个新的随机目的地并发送它的方式，否则只是让bug沿着它的路径移动。

这只是一个开始，后来你会想要使用速度/矢量，以及一些基本的触发，所以当一个虫子转向一个新的目的地时，路径是一个小拱而不是急转弯。 / p>

Answer 3

现在，错误每帧都会移动一个随机像素数。这给他们带来了紧张的影响。如果你希望它们看起来更像是爬行，你需要让它们始终向前移动，而不是随意转动。为此，您需要一个更复杂的算法。对于初学者来说，你需要为每个改变每个帧位置的bug提供速度，并随着时间的推移改变速度。

您可能还想调查Steering Behavior，这可能更像您正在寻找的内容。

Bug动画Javascript

3 个答案: