通过Canvas上的点阵列动画对象，同时保持统一的速度？

Question

（我是Javascript / HTML / CSS编码的新手，请原谅我糟糕的风格！）

我想以静态速度沿着该阵列中的一组坐标为数组中的对象设置动画：

数组示例：

_myPtArr = [{x:297, y:30},{x:299,y:47},{x:350,y:56},{x:305,y:176},{x:278,y:169},
{x:303,y:108},{x:269,y:79},{x:182,y:90},{x:137,y:81},{x:173,y:33},{x:231,y:38}];

我做的是做了什么;创建一个在程序开头运行的函数，以接收任何数组，并将距离属性（名为“dis”）添加到它计算距离的两个点中的第一个，如下所示：

function findDist(array) {
    for (var i = 0; i<array.length-1;i++){
        var p = array[i],
            q = array[i+1],
            dx   = p.x - q.x,         
            dy   = p.y - q.y,         
            dist = Math.sqrt(dx*dx + dy*dy);
            array[i].dis=dist;
    }
}

我这样做是因为我动画它们的方式是创建一个名为“_tick”的变量，它将它们从一个点移动到另一个点，从0到1递增，0是起点，1是结束点。我打算将滴答倍数乘以距离，以便不同的线长度以相同的速度生成动画。但我没有得到这样的工作！我被卡住了！ 这是我正在谈论的功能：

function calculateInnerPts(pts, pos){
        var ptArr = [];
        console.log(pts.length);
        for(var i = 0; i < pts.length-1; i++){
           ptArr[i] = {x: pts[i].x + (pts[i+1].x - pts[i].x) * pos, y: pts[i].y + 
         (pts[i+1].y - pts[i].y) * pos};
        } 
        return ptArr;
 }  

在这样的系列中被召唤：

在enterFrameHandler（常量迭代）中，“section”只是递增以抓取每组2个点/对象，所以在_tick变为“1”之后，++节。 ：

ballAnim([_myPtArr[_section],_myPtArr[_section+1]],_tick);

然后在外面：

function ballAnim(pts,pos){
    var iPts = pts;

    for(var i = 0; i < pts.length-1; i++){
        iPts = calculateInnerPts(iPts, pos);  
    }

    drawBall(iPts[0]);
 }

最后，我画球：

function drawBall(pts){
    var w = 6,
        h = 2;
    ctx.clearRect(0,0,400,300);
    ctx.beginPath();
    ctx.arc(pts.x, pts.y, 5, 0, Math.PI * 2);
    ctx.fillStyle="blue";
    ctx.fill();
    ctx.strokeStyle="black";
    ctx.closePath();
    ctx.stroke();
}

任何人都可以了解如何在这个系统中实现这一目标，或者甚至是另一种更好的方法来实现同样的效果？我想放入任何数组并得到相同的结果（意味着球以静态速度动画）！

注意：除了普通的'Javascript / HTML / CSS之外，我不想使用任何东西;没有API！

非常感谢你们，这个社区真是太棒了，这是我的第一篇文章，所以对我这么轻松！ XD

Answer 1

我确信上面的答案更优雅，但我整个上午一直在研究这段代码，我想分享......

Demo of code here

//requestAnimFrame shim via Paul Irish
window.requestAnimFrame = (function(callback){
    return (window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        function(callback){window.setTimeout(callback, 1000/60);});
        })();

//main code
window.onload = function(){
    //setup canvas
    var canvas = document.getElementById('mycanvas');
    var ctx = canvas.getContext('2d');

    //variables
    var canvasWidth = 400, canvasHeight = 400;    //as set up in the <canvas> tag
    var animationTime = 10000;                    //animation length in milliseconds

    //clear canvas function
    var clearCanvas = function(){
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        };

    //define the line; build function for displaying it
    var _myPtArr = [
        {x:297, y:30}, {x:299,y:47}, {x:350,y:56}, {x:305,y:176},
        {x:278,y:169}, {x:303,y:108}, {x:269,y:79}, {x:182,y:90},
        {x:137,y:81}, {x:173,y:33}, {x:231,y:38}
        ];
    var lineColor = 'red';
    var drawLine = function(){
        ctx.beginPath();
        ctx.moveTo(_myPtArr[0].x, _myPtArr[0].y);
        for(var i=1, z=_myPtArr.length; i<z; i++){
            ctx.lineTo(_myPtArr[i].x, _myPtArr[i].y);
            }
        ctx.strokeStyle = lineColor;
        ctx.stroke();
        };

    //define the ball; build function for displaying it
    var myBall = {x: 0, y: 0, radius: 5, fillStyle: 'blue', strokeStyle: 'black'};
    var drawBall = function(){
        ctx.beginPath();
        ctx.arc(myBall.x, myBall.y, myBall.radius, 0, (Math.PI*2));
        ctx.closePath();
        ctx.fillStyle = myBall.fillStyle;
        ctx.strokeStyle = myBall.strokeStyle;
        ctx.fill();
        ctx.stroke();
        };

    //build an array of objects for each line to help ball position calculations
    var myBallVectors = [];
    var fullDistance = 0, p, q, dx, dy, tempDistance, tempTime, fullTime = 0;
    for(var i=1, z=_myPtArr.length; i<z; i++){
        p = _myPtArr[i-1], q = _myPtArr[i];
        dx = q.x - p.x;
        dy = q.y - p.y;
        tempDistance = Math.sqrt((dx*dx)+(dy*dy));
        fullDistance += tempDistance;
        myBallVectors.push({x: p.x, y: p.y, dX: dx, dY: dy, magnitude: tempDistance});
        }
    for(var i=0, z=myBallVectors.length; i<z; i++){
        myBallVectors[i]['start'] = fullTime * animationTime;
        tempTime = myBallVectors[i].magnitude/fullDistance;
        fullTime += tempTime
        myBallVectors[i]['duration'] = tempTime * animationTime;
        myBallVectors[i]['finish'] = fullTime * animationTime;
        }

    //function to work out where ball is in space and time
    var myBallPosition = function(){
        if(Date.now() > breakTime){
            //move on to next line
            currentLine++;
            //check to see if animation needs to finish
            if(currentLine >= myBallVectors.length){
                doAnimation = false;
                }
            //otherwise, set new break point
            else{
                breakTime = startTime + parseInt(myBallVectors[currentLine].finish);
                }
            }
        if(doAnimation){
            //calculate ball's current position
            var timePassed = Date.now() - (startTime + myBallVectors[currentLine].start)
            var percentageLineDone = timePassed/myBallVectors[currentLine].duration;
            myBall.x = myBallVectors[currentLine].x + (myBallVectors[currentLine].dX * percentageLineDone);
            myBall.y = myBallVectors[currentLine].y + (myBallVectors[currentLine].dY * percentageLineDone);
            }
        };

    //setup and display initial scene
    drawLine();
    myBall.x = _myPtArr[0].x;
    myBall.y = _myPtArr[0].y;
    drawBall();

    //animation loop function
    animate = function(){
        clearCanvas();
        drawLine();
        myBallPosition();
        drawBall();
        if(doAnimation){
            requestAnimFrame(function(){
                animate();
                });
            }
        };

    //setup control variables, and start animation
    var startTime = Date.now(), currentLine = 0;
    var breakTime = startTime + parseInt(myBallVectors[currentLine].finish);
    var doAnimation = true;
    animate();

    };

Answer 2

以均匀的速度在折线上设置对象动画

什么是速度？

速度是每秒行进的距离（或分钟，小时等）。

例如：速度是每小时英里数。

因此，以均匀的速度制作动画实际上意味着以每秒均匀的距离进行动画制作。

在折线上以均匀的速度制作动画实际上意味着将球放在该折线上的均匀距离，无论每个线段的末端都在哪里。

重要的方面是球必须始终以相同的距离落下。

例如：如果您需要每秒行进300像素，则可能需要经过多个点，直到达到300像素的距离。或者，如果这些点相距甚远，您甚至可能无法完全前往下一点。

以下代码构建于_myPtArr和findDist。

它沿着_myPtArr定义的折线以均匀的距离投放球。

总折线分为任意20个均匀长度的步骤。

每1/4秒就会丢弃一个新球。

您可以通过以下任一方式更改掉落速度：

• 更改完成折线所需的步数（球）。
• 更改定时器间隔，以便更快/更慢地放下球。

为了让一个球看起来正在移动，只需在绘制下一个球之前清除前一个球。

让球更顺畅地移动：

• 增加步数，可能为200。
• 减少时间间隔，可能是25。

这是代码和小提琴：http://jsfiddle.net/m1erickson/3Fmm2/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" 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");

    _myPtArr = [{x:297, y:30},{x:299,y:47},{x:350,y:56},{x:305,y:176},{x:278,y:169},
    {x:303,y:108},{x:269,y:79},{x:182,y:90},{x:137,y:81},{x:173,y:33},{x:231,y:38}];

    var totDistance=0;

    for (var i = 0; i<_myPtArr.length-1;i++){
        var p = _myPtArr[i],
            q = _myPtArr[i+1],
            dx   = p.x - q.x,         
            dy   = p.y - q.y,         
            dist = Math.sqrt(dx*dx + dy*dy);
            totDistance+=dist;
            _myPtArr[i].dist=dist;
            _myPtArr[i].untraveled=dist;
    }

    var steps=20;
    var distancePerStep=totDistance/steps;
    var totTraveled=0;
    var currentPoint=0;

    // drop first ball 
    drawBall(_myPtArr[0].x,_myPtArr[0].y);

    animate();

    function animate(){

        var mustTravel=distancePerStep;

        while(mustTravel>0){

            // check if we're done
            if(currentPoint >= _myPtArr.length-1){console.log("done"); return;}

            var pt0=_myPtArr[currentPoint];
            var pt1=_myPtArr[currentPoint+1];
            var dx=pt1.x-pt0.x;
            var dy=pt1.y-pt0.y;
            var lastX,lastY;

            if(pt0.untraveled<mustTravel){

                // travel this whole segment
                drawSegment(pt0,pt1);
                lastX=pt1.x;
                lastY=pt1.y;

                // and reduce d by length traveled
                mustTravel -= pt0.untraveled;
                pt0.untraveled = 0;
                if(mustTravel<1){mustTravel=0;}

                // go onto the next point
                currentPoint++;

            }else{

                // travel only part of this segment
                // It has enough available length to complete travel

                // start at the previously traveled point on the segment
                var prevTraveled = pt0.dist - pt0.untraveled;
                var x1 = pt0.x + dx * prevTraveled/pt0.dist;
                var y1 = pt0.y + dy * prevTraveled/pt0.dist;

                // travel only part of segment
                var x2 = x1 + dx * mustTravel/pt0.dist;
                var y2 = y1 + dy * mustTravel/pt0.dist;

                // draw a segment
                drawSegment({x:x1,y:y1},{x:x2,y:y2});
                lastX=x2;
                lastY=y2;

                // update segement and untraveled
                pt0.untraveled -= mustTravel;
                mustTravel=0;;

            }

        }

        // drop a ball 
        drawBall(lastX,lastY);

        setTimeout(animate,250);
    }

    function drawSegment(pt0,pt1){
    console.log("segment:"+pt0.x+"/"+pt0.y+" -- "+pt1.x+"/"+pt1.y);
        ctx.beginPath();
        ctx.moveTo(pt0.x,pt0.y);
        ctx.lineTo(pt1.x,pt1.y);
        ctx.stroke();
    }
    function drawBall(x,y){
    console.log("ball:"+x+"/"+y);
        ctx.beginPath();
        ctx.arc(x,y,5,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
    }


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

</head>

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

Answer 3

我不确定您的代码是如何执行的，但我没有看到函数或其他类型的代码来控制动画速度。

你必须要知道的第一件事是，人眼将任何变化视为平滑，大多数情况发生在不到30毫秒。您需要的第二件事是定期运行的函数，可以使用 setTimeout 或 setInterval 来实现。

所以第一步是通过setTimeout或setInterval间接执行动画功能，我建议你以30毫秒的速率开始，然后根据代码的性能调整时间间隔。

一旦你有了这个，你需要知道必须执行多少次动画功能才能达到所需的速度，例如，如果你想要动画持续1秒，你的动画功能必须执行33次，所以您的点必须每次移动距离/ 33像素。然后以每个动画帧的像素为单位测量速度......你必须记住，因为距离被测量为直线，速度也有直线含义，所以你不能将它添加到x和y，因为产生的速度会有所不同，所以正确的做法是：

speed = distance/frames;
.
.
.
dx = end.x-current.x;
dy = end.y-current.y;
d = Math.sqrt(dx*dx+dy*dy);
current.x += speed*dx/d;
current.y += speed*dy/d;

更有效的方法是：

dx = end.x-start.x;
dy = end.y-start.y;
speed.x = dx/frames;
speed.y = dy/frames;
.
.
.
current.x += speed.x;
current.y += speed.y;

...所以你将有两个速度控制：每秒帧数和每帧像素。通过这种方式，您可以以完全相同的速度为所有球设置动画，或者以比例速度为它们设置动画，使所有开始和结束同时移动，使它们以固定速度移动，加速，减速和各种效果......由你决定。