javascript - Animating a line after another animation using HTML5 canvas

The problem I have is the my straight line starts animating towards the circle at the start of page load. And I am having trouble figuring out the logic to get the line animating in the other direction after my first animation is pleted (which is the circle).

So overall I would like to acplish a dual animation where the straight line starts to animate to the left, stemming from the circle, only after the circle has pleted its full animation.

Html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
       <canvas id="cas"></canvas>
    </body>
</html>

Javascript

$(function () {
    //gloabl definitions
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var canvas = document.getElementById('cas');
    var context = canvas.getContext('2d');

    canvas.width = 470;
    canvas.height = 400;

    //core plugin features & call
    var circleDefaults = {
        circlePos: {
            x: 338,
            y: 130
        },
        radius: 120,
        counterClockwise: false,
        startAngle: Math.PI / 2,
        endAngle: Math.PI * 2,
        currentPercent: 0,
        endPercent: 90
    }

    var lineDefaults = {
        movePos: {
            x: 0,
            y: 80
        },
        linePos: {
            x: 10,
            y: 80
        }
    }

    function AnimateCircle(current) {
        context.beginPath();
        context.arc(circleDefaults.circlePos.x, circleDefaults.circlePos.y, circleDefaults.radius, -(circleDefaults.startAngle), ((circleDefaults.endAngle) * current) - circleDefaults.startAngle, circleDefaults.counterClockwise);
        context.lineWidth = 0.5;

        context.strokeStyle = "#000"
        context.stroke();
        context.closePath();

        context.beginPath();
        context.moveTo(830, 80);
        context.lineTo(400, 80);
        context.stroke();
        context.closePath();

        circleDefaults.currentPercent++;
        if (circleDefaults.currentPercent < circleDefaults.endPercent) {
            requestAnimationFrame(function () {
                AnimateCircle(circleDefaults.currentPercent / 100);
            });
        }
    }

    function AnimateLine() {
        context.beginPath();
        context.moveTo(lineDefaults.movePos.x, lineDefaults.movePos.y);
        context.lineTo(lineDefaults.linePos.x, lineDefaults.linePos.y);
        context.stroke();
        context.closePath();

        lineDefaults.linePos.x++;

        if (circleDefaults.currentPercent < lineDefaults.linePos.x) {
            requestAnimationFrame(function () {
                AnimateLine();
            });
        }
    }

    AnimateCircle();
    AnimateLine();
});

Here is my fiddle below:

Thank You!

So overall I would like to acplish a dual animation where the straight line starts to animate to the left, stemming from the circle, only after the circle has pleted its full animation.

Html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
       <canvas id="cas"></canvas>
    </body>
</html>

Javascript

$(function () {
    //gloabl definitions
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var canvas = document.getElementById('cas');
    var context = canvas.getContext('2d');

    canvas.width = 470;
    canvas.height = 400;

    //core plugin features & call
    var circleDefaults = {
        circlePos: {
            x: 338,
            y: 130
        },
        radius: 120,
        counterClockwise: false,
        startAngle: Math.PI / 2,
        endAngle: Math.PI * 2,
        currentPercent: 0,
        endPercent: 90
    }

    var lineDefaults = {
        movePos: {
            x: 0,
            y: 80
        },
        linePos: {
            x: 10,
            y: 80
        }
    }

    function AnimateCircle(current) {
        context.beginPath();
        context.arc(circleDefaults.circlePos.x, circleDefaults.circlePos.y, circleDefaults.radius, -(circleDefaults.startAngle), ((circleDefaults.endAngle) * current) - circleDefaults.startAngle, circleDefaults.counterClockwise);
        context.lineWidth = 0.5;

        context.strokeStyle = "#000"
        context.stroke();
        context.closePath();

        context.beginPath();
        context.moveTo(830, 80);
        context.lineTo(400, 80);
        context.stroke();
        context.closePath();

        circleDefaults.currentPercent++;
        if (circleDefaults.currentPercent < circleDefaults.endPercent) {
            requestAnimationFrame(function () {
                AnimateCircle(circleDefaults.currentPercent / 100);
            });
        }
    }

    function AnimateLine() {
        context.beginPath();
        context.moveTo(lineDefaults.movePos.x, lineDefaults.movePos.y);
        context.lineTo(lineDefaults.linePos.x, lineDefaults.linePos.y);
        context.stroke();
        context.closePath();

        lineDefaults.linePos.x++;

        if (circleDefaults.currentPercent < lineDefaults.linePos.x) {
            requestAnimationFrame(function () {
                AnimateLine();
            });
        }
    }

    AnimateCircle();
    AnimateLine();
});

Here is my fiddle below:

http://jsfiddle/coder101/fa28A/

Thank You!

Share Improve this question edited May 29, 2014 at 15:13 Rory McCrossan 338k41 gold badges320 silver badges351 bronze badges asked May 29, 2014 at 15:11 Amechi 8103 gold badges12 silver badges32 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

Did you mean this kind of animation? http://jsfiddle/fa28A/1/

Let's go ahead and run each of your concerns one by one.

where the straight line starts to animate to the left, stemming from the circle

You weren't really clear so I just assumed that the line starts inside the circle and goes until the left end point.

In your AnimateLine() function, what you're doing is moving your line to the right slowly, when you want it to move to the left.

context.beginPath();
context.moveTo(lineDefaults.movePos.x, lineDefaults.movePos.y);
context.lineTo(lineDefaults.linePos.x, lineDefaults.linePos.y);
context.stroke();
context.closePath();

lineDefaults.linePos.x++; //here's what makes it go right

One more problem is the condition for your continuation/termination of drawing the line.

//i don't understand this condition
if (circleDefaults.currentPercent < lineDefaults.linePos.x) {
    requestAnimationFrame(function () {
        AnimateLine();
    });
}

Maybe you were trying to use this condition to "synchronize" the drawing or whatever, but the point is, it doesn't work and it doesn't make sense.

This is what should happen to your AnimateLine() function to fix the said problems :

function AnimateLine() {
  context.beginPath();
  context.moveTo(lineDefaults.movePos.x, lineDefaults.movePos.y);
  context.lineTo(lineDefaults.linePos.x, lineDefaults.linePos.y);
  context.stroke();
  context.closePath();

  //see how i made this to decrements so that it will move to the left instead
  lineDefaults.linePos.x--; 

  //adjust this to where you want the line to end
  var end_of_line = 0; 
  if (lineDefaults.linePos.x > end_of_line) {
    requestAnimationFrame(function () {
      AnimateLine();
});
  }
}

For your next concern :

only after the circle has pleted its full animation

If you're familiar with callbacks, I used the same concept.

if (circleDefaults.currentPercent < circleDefaults.endPercent) {
  requestAnimationFrame(function () {
    AnimateCircle(circleDefaults.currentPercent / 100);
  });
}
//I added this part, since the condition above is the "while drawing" state,
//    its negation, the else part, would be the "finished drawing" state
else{
  AnimateLine();
}

Protip : Instead of drawing a line, then applying another line (but longer) on top of it to simulate an animation, try drawing bits and bits of lines instead. It's going to run faster, theoretically. Although in a small animation like this, it won't really matter. Haha.

why not just set a delay

setTimeout( AnimateLine, 10000);

You could use jQuery's Deferred objects to easily process functions sequentially. A simple example (source):

function wait(ms) {
  var deferred = $.Deferred();
  setTimeout(deferred.resolve, ms);
  return deferred.promise();
}

wait(1500).then(function () {
  // Do something after wait() has resolved
});

Here's how it could look when applied to a canvas animation: CSSDeck example

You can always add a callback to your Animate circle function which will call your next animation when it's done.

function AnimateCircle(current, callback) {
...

if (circleDefaults.currentPercent < circleDefaults.endPercent) {
        requestAnimationFrame(function () {
            AnimateCircle(circleDefaults.currentPercent / 100, callback);
        });
    }
else
    callback();
...
}

...

AnimateCircle(null, AnimateLine);

But make sure you change this condition in your AnimateLine, otherwise the line won't appear:

if (circleDefaults.currentPercent < lineDefaults.linePos.x) {

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Animating a line after another animation using HTML5 canvas - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)