paperjs中的路径平滑褪色

Question

我想做一个路径淡化效果，通过沿着路径逐渐淡化它的笔触来使路径消失。

我现在能做的是逐个删除路径中的每个段，产生的效果很差：sketch。

var circle = new Path.Circle({
    center: view.center,
    radius: 50,
    strokeColor: 'black',
    closed: false
});
circle.addSegment(circle.firstSegment);

fade();

function fade() {
    if (circle.segments.length > 0) {
        setTimeout(function() {
            circle.lastSegment.remove();
            fade();
        }, 1000);
    }
}

有没有办法使动画更流畅？

Answer 1

要制作平滑的路径动画，不必删除片段，也可以使用path.dashArray和path.dashOffset来播放。
通过将破折号数组设置为路径的长度并设置动画破折号偏移量，可以实现所需的内容。
查看此架构以更好地理解：

这里是sketch演示解决方案。

// create path
var path = new Path.Circle({
    center: view.center,
    radius: 50,
    strokeColor: 'black',
    closed: false
});
path.addSegment(path.firstSegment);

// set dash array as long as path length
path.dashArray = [path.length, path.length];

// on frame...
function onFrame(event) {
    // ...increment dash offset
    path.dashOffset += 1;
}