Как добиться примера анимации пользователя в холсте

В недавнем проекте мне нужно сделать новый спрос: реализовать анимацию пользовательского пути в холсте. Таким образом, пользовательский путь не только включает в себя не только прямую линию, возможно, несколько прямых комбинаций движения и даже включать кривую Бесселя.

Итак, как мы можем достичь этого эффекта анимации в холсте? На самом деле, это очень просто.

Прежде чем сделать анимацию, мы должны сначала получить путь анимации. Просто используйте API SVG, поэтому ему не нужно вставлять его на страницу)

 Const Path = 'M0,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861 128,92 C150.09139 160,72 160,56 C1 60,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; Pathlement.setattributens (null, 'd', path);

Два API, предоставленные SVGPatheLement, являются критическими

Метод GetTotallength может получить общую длину SVGPathelement

Метод getPointTlength передается в длину x, которая вернет конечные координаты длины начальной точки SVGPatheLement.

Используйте эти два API, чтобы непрерывно обновлять графические координаты, проведенные в холсте через цикл, и анимация пути может быть достигнута:

 Const Dely = pathertement.getTotallength (); 0; Move (x, y); Canvas.Head); closePath ();}

Наконец, мы инкапсулируем его, чтобы реализовать простую функцию, которая реализует пользовательскую анимацию в холсте:

 Функция custmepath (path, func) {const forms = document.createelementns ('http://www.w3.org/2000/svg', path); Const Duration = 1000; Шаг) .x); 'M0, 0 C8,33.9961 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90862 128,92 C150.09139,72 160,56 C160,40 148 24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78,09139 8,56 Z '; {context.clearrect (0, 0, canvas.width, canvas.height);

Реализация идей примерно, как описано выше, но это не конечный результат. Когда мы решаем сделать пользовательскую анимацию пути в холсте, мы должны не только рассмотреть вопрос о том, как ее достичь, но и рассмотреть возможность оптимизации производительности. Как контролировать частоту кадров до оптимальной? и т. д.

Хотя они не находятся в сфере обсуждения этой статьи, о них стоит подумать.

Выше всего содержимое этой статьи.