Question

我正在尝试对多个对象使用this“moveTo（x，y）”（通过markE）函数。 This是我尝试过的。这就是我试图做的事情：

在示例中计算和移动对象如下所示：

pct += .01;
// if we're not done, request another animation frame
if (pct < 1.00) {
    requestAnimFrame(animate);
}

// Calculate the next XY position
var nextX = startingX + dx * pct;
var nextY = startingY + dy * pct;

// Draw the shape
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(nextX, nextY, 40, 30);

而这，我正在尝试为多种形状做的事情：

var shapesLength = shapes.length;
for (var i = 0; i < shapesLength; i++) {// Loop through every object

var tmpShape = shapes[i];//selecting shape

    tmpShape.pct += .01;// increment pct towards 100%

    // if we're not done, request another animation frame
    if (tmpShape.pct < 1.00) {
        requestAnimFrame(animate);
    }

    // Calculate the next XY position
    var nextX = tmpShape.startingX + tmpShape.dx * tmpShape.pct;
        var nextY = tmpShape.startingY + tmpShape.dy * tmpShape.pct;

    // Draw the shape
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(nextX, nextY, 10, 10);
};

但出了点问题，我不知道是什么。

Answer 1

出现问题的是requestAnimFrame在你的循环中。

您需要在循环外调用requestAnimFrame。

以下是示例代码和小提琴：http://jsfiddle.net/m1erickson/HAbfm/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();

        var shapes=[];
        shapes.push({startX:10,  startY:10,  endX:140, endY:140, color:"red"});
        shapes.push({startX:280, startY:10,  endX:150, endY:140, color:"green"});
        shapes.push({startX:10,  startY:280, endX:140, endY:150, color:"blue"});
        shapes.push({startX:280, startY:280, endX:150, endY:150, color:"gold"});

        var pct=0.00;
        var fps = 60;

        animate();

        function animate() {
            setTimeout(function() {


                // increment the percent (from 0.00 to 1.00)
                pct+=.01;

                // clear the canvas
                ctx.clearRect(0,0,canvas.width,canvas.height);

                // draw all shapes
                for(var i=0;i<shapes.length;i++){

                    // get reference to next shape
                    var shape=shapes[i];

                    // note: dx/dy are fixed values
                    // they could be put in the shape object for efficiency
                    var dx=shape.endX-shape.startX;
                    var dy=shape.endY-shape.startY;
                    var nextX = shape.startX + dx * pct;
                    var nextY = shape.startY + dy * pct;                
                    var shape=shapes[i];
                    ctx.fillStyle=shape.color;
                    ctx.fillRect(nextX,nextY,7,7);
                }

                if(pct<1.00){requestAnimFrame(animate)};


            }, 1000 / fps);
        }


    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

以下是如何为每个形状实现多个航点的示例：

http://jsfiddle.net/m1erickson/UNjdC/

[添加：解释如何创建形状并为其设置动画]

您可以通过3个步骤创建和动画形状：

在动画期间为要跟随的一个形状创建折线。
将新形状推入shapes []数组中。每个形状对象都定义了自己的宽度，高度，颜色和上面＃1的动画折线。
在所有新形状位于shapes []数组中之后，调用animate（）以沿着自己的多边形路径为所有形状设置动画。

以下是上述步骤1-3的代码位：

// 1. create a polyline for one shape to follow

points = pointsToSingleArray([
    {x:48,y:2},
    {x:48,y:365}
]);


// 2. push the shape into the shapes array
// 
// a shape object contains width/height/color and the polyline

shapes.push({
    width: shapeWidth,
    height: shapeHeight,
    waypoints: points,
    color: "red"
});

// 3. After you've pushed all desired shapes into the 
//    shapes[] array, call animate() to start draw all
//    objects along their own polyline paths.

animate();

将画布中的多个对象移动到x，y坐标

1 个答案: