Question

在这里，我有画布在画布上绘制线条...每隔300毫米画一条线，但它对眼睛来说太难了......

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

有什么方法可以让动画过渡顺利进行？让这个动画变得更好的方法是什么？如何进行转型？

Answer 1

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

首先，您需要确定较短的间隔，并确定将有多少“中间”步骤，然后使用这些步骤进行转换。

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

Html5画布线绘制过渡

1 个答案: