Html5画布线画过渡

Question

这里有画布，可以在画布上画线……每 300 毫秒画一条线，但对眼睛来说太难了……

链接演示：http://jsbin.com/fabalo

代码：

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

有什么方法可以使动画过渡顺利进行吗？ 有什么方法可以让这个动画更好？如何进行过渡？

Answer 1

canvas 中没有这样的功能。您必须自己找到一种方法来制作缓动/过渡/补间功能。

首先，您需要确定更短的间隔，并计算出将有多少“中间”步骤，然后将这些步骤用于过渡。

将其视为在主数组的每两个步骤之间创建一个时间 x 步数组。