Путь сглаживается в paperjs

Question

Я хотел бы сделать эффект затухания пути, при котором путь исчезнет, ​​если постепенно затухать по его траектории.

То, что я могу сейчас сделать, - это удалять один за другим каждый сегмент пути, производя довольно плохой эффект: Эскиз .

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 .
Установив массив тире в длину пути и анимировав смещение тире, вы можете достичь того, что ищете.
Посмотрите на эту схему для лучшего понимания:

Вот эскиз , демонстрирующий решение.

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