CODEWITHSUNDEEP
javascriptcanvastransitionbezier
HIRA THAKUR
HIRA THAKUR

Reputation: 17757

transition to curve drawn in canvas?

I have a simple straight line drawn by a bezier curve.The challenge is to change the position it transition i.e if the height of curve increases or decreases,it should happen in transition,not all of a sudden.So my question is to provide the transition on mouseover of canvas??how is it possible to provide transition to a curve?

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";
ctx.beginPath();
ctx.moveTo(328, 347);
ctx.bezierCurveTo(326, 387, 326, 386, 326, 420);
ctx.stroke();

Upvotes: 0

Views: 3900

Answers (1)

markE
markE

Reputation: 105015

You can use requestAnimationFrame to animate a curve on mouseenter.

This is the function that does the animation:

Best practices are now shifting to use requestAnimationFrame instead of setInterval. This code wraps the RAF inside a timeout in order to control the frame rate.

function draw() {
    setTimeout(function() {

        // request another loop
        requestAnimationFrame(draw);

        // animate the control point
        cpY+=movement;
        if (cpY<50 || cpY>250){movement= -movement;}        

        // draw the new bezier
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.moveTo(100,150);
        ctx.quadraticCurveTo(150,cpY,200,150);
        ctx.lineWidth=10;
        ctx.stroke();

    }, 1000 / fps);
}

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/p5snk/

<!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");

    var cpY = 150;
    var movement = -8;
    var fps = 60;

    $("#canvas").mouseenter(function () {
        cpY = 150;
        movement = -10;
        draw();
    });
    $("#canvas").mouseleave(function () {
        cpY = 50;
        movement = 15;
        draw();
    });

    drawLine();

    function drawLine() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.moveTo(100, 150);
        ctx.lineTo(200, 150);
        ctx.lineWidth = 10;
        ctx.stroke();
    }

    function draw() {
        setTimeout(function () {

            if (cpY < 50) {
                return;
            }
            if (cpY > 150) {
                drawLine();
                return;
            }

            // request another loop
            requestAnimationFrame(draw);

            // animate the control point
            cpY += movement;

            // draw the new bezier
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.moveTo(100, 150);
            ctx.quadraticCurveTo(150, cpY, 200, 150);
            ctx.lineWidth = 10;
            ctx.stroke();

        }, 1000 / fps);
    }

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

</head>

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

Upvotes: 4

Related Questions