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 and 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;
}

paperjs中的路径平滑衰落

Path smooth fading in paperjs

animation

paperjs