CODEWITHSUNDEEP
htmlanimationcanvaspolylinesmoothing
dert detg
dert detg

Reputation: 303

Html5 canvas line draw transition

Here I have canvas that draw line on canvas... every 300ms draw a line but its too hard for eyes...

LINK DEMO: http://jsbin.com/fabalo

CODE:

var test = [{"X":300,"Y":200}];
var set_time;
var m = 0;
var add_array = function(){
  ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );
    if(m < pts.length){
       var q = pts[m].X;
       var e = pts[m].Y;
       console.log(test);
       test.push({"X":q,"Y":e});
       mimicSvg(test,1);

       m++;
       set_time = setTimeout(add_array,300);//it call itself again and again until m is more than the length of the array'
    }else{
       clearTimeout(set_time);
    }
};

set_time = setTimeout(add_array,300);

Is there any way that I can make animation transition to work smoothly? What is the way to make this animation better? How to make transition?

Upvotes: 0

Views: 721

Answers (1)

Shomz
Shomz

Reputation: 37701

There is no such feature in canvas. You'll have to find a way to make the easing/transition/tween function yourself.

First, you need to decide on a shorter interval and figure out how many "in-between" steps will be there and then use those for the transition.

Think about it as making a temporal x-step array between each two steps of your main array.

Upvotes: 1

Related Questions