0

我有我认为的错误模拟器的良好基础，但我没有得到我想要的动画运动。

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

我是 javascript 新手，只是在乱搞，所以也欢迎任何改进我的编码标准的建议。

谢谢

http://jsfiddle.net/UmSss/11/

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);
              };
    })();
4

3 回答 3

3

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

  1. 让动作变小。
  2. 不要一次涂黑所有的错误然后重新绘制它们。将每个错误涂黑并立即将其重新绘制为黄色。依次做每个错误。
  3. 跟踪错误上次移动的方式，只允许它向该方向移动或向任一侧移动 90 度。
  4. 将错误设置为 10 组，每组 10 个，并为每组设置一个计时器。这可以防止错误运动与其他错误同步，并且看起来更好。
于 2013-07-30T17:43:23.627 回答
1

我猜你在这里试图做的是让虫子从一个位置平稳地飞到另一个位置，而不是像现在这样摇晃。

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

  1. 第一次对任何错误对象调用更新时，我会生成一个随机 DESTINATION。

  2. 之后每次调用更新函数时，都会将错误移至该位置。为了让它变得更好，给每个 bug 分配一个随机的 SPEED，或者研究某些类型的缓动函数（即，在每一帧中，找到 bug 与其目的地之间的中点并将其移动到那里将产生缓动效果。）

  3. 每次调用更新函数时，您还将检查错误是否已到达目的地。如果有，则创建一个新的随机目的地并将错误发送到它的路上，否则只是让错误沿着它的路径移动。

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

于 2013-07-30T17:43:10.780 回答
0

现在，这些错误正在每帧移动随机数量的像素。这给了他们一种紧张不安的效果。如果您希望它们看起来更像是在爬行，您需要让它们始终向前移动但随机转动。为此，您需要一个更复杂的算法。对于初学者，您需要为每个改变每帧位置的 bug 设置速度，并随着时间的推移改变该速度。

您可能还想调查可能更像您正在寻找的转向行为。

于 2013-07-30T17:37:20.017 回答