CODEWITHSUNDEEP
javascripthtmlanimationdrawingkineticjs
Ryan
Ryan

Reputation: 318

How can I animate an arc shape with Kinetic js/html5 so that the "snake" grows longer?

Essentially I am looking to build something like this:

http://themes.pixelworkshop.fr/?theme=CircularCountdownPlugin

I'm making a similar countdown clock with two arc laid on top of each other- one a full circle, and one another arc of another color that lays on top of the first and grows and shrinks to show how much time is left. (I decided not to use this actual plugin b/c my clock will function differently as far as how it calculates and displays time)

By re-purposing code from another question:

var redArc = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI / 2, true);
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(255,0,0)',
    strokeWidth: 20,
    offset: [x, y]
});

http://jsfiddle.net/EkG5P/1/

I was able to draw the arcs I need. But I can't figure out how to animate the changing size of one of the arcs (grow or shrink the length of the "snake") (Note this example doesn't show exactly what I'm trying to do, but it's close enough b/c it shows exactly the type of arcs I want to animate to grow and shrink)

Thanks for your help!

Upvotes: 1

Views: 1335

Answers (1)

markE
markE

Reputation: 105015

This function will turn clock seconds into radians that you can use in your arc:

// zero seconds (the 12 oclock position)
var startingAngle = secondsToRadians(0);

// get the current seconds and its associated radian angle  
var currentSeconds=new Date().getSeconds();
var endingAngle = secondsToRadians(currentSeconds);

function secondsToRadians(seconds) {
    var degrees=(seconds-15)*6;
    var radians=(degrees * Math.PI)/180;
    return(radians);
}

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

<!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 centerX = Math.floor(canvas.width / 2);
    var centerY = Math.floor(canvas.height / 2);
    var radius = Math.floor(canvas.width / 3);
    var startingAngle = secondsToRadians(0);

    ctx.fillStyle = "#819FF0";
    ctx.strokeStyle="black";
    ctx.lineWidth=3;
    ctx.font="24px Verdana";

    setInterval(function() {
        // draw the arc about every second
        // set the arc to reflect the actual clock seconds
        drawClockWedge( new Date().getSeconds() );
    }, 1000);

    function drawClockWedge(seconds){

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

        // calculate the seconds (in actual time)
        // and convert to radians that .arc requires
        var endingAngle = secondsToRadians(seconds);

        // draw a closed arc representing elapsed seconds
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        // also display the seconds on top
        ctx.fillText("["+seconds+"]",centerX-25,centerY-radius-20);
        ctx.restore();
    }

    function secondsToRadians(seconds) {
        var degrees=(seconds-15)*6;
        var radians=(degrees * Math.PI)/180;
        return(radians);
    }

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

</head>

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

Upvotes: 4

Related Questions