Привет.
У меня есть скрипт, который рисует линии при движении мыши.
Он работает следующим образом:
При событии mousemove фиксируются точки, через которые прошел курсор и они заносятся в массив.
Далее в цикле анимации между этими точками рисуются линии.
Проблема в том, что если быстро двигать мышкой, то будет зафиксировано мало точек и некоторые линии будут очень длинными. И если просто удалять точку из массива через this.points.shift(), то никакого плавного удаления не будет, эта большая линия просто резко исчезнет.
Я решил пойти таким путем:
Смещать последнюю точку в сторону следующей точки. И когда она дойдет до нее просто удалить ее из массива и тогда не будет видно никаких резких удалений. Вроде бы я реализовал эту идею, но почему-то иногда происходят резкие глюки, мерцания (скриншот внизу). Как можно это исправить? Также я хотел бы реализовать эффект плавного перехода с прозрачностью, чтобы она уменьшалась в хвосте, как это можно реализовать?
Не пытайтесь полностью изменить мой код. Это лишь кусок из моего проекта, я его специально упростил для вас, чтобы никто не терял время и смог быстрее вникнуть в код. Поэтому мне нужно, чтобы был массив точек, мне нужно использовать requestAnimationFrame и т. д.
Код:
https://jsfiddle.net/0f62oegx
