Как анимировать векторную траекторию, как будто она рисуется, постепенно? Другими словами, медленно показывать путь пиксель за пикселем.
Я использую Raphaël.js, но если ваш ответ не является специфичным для библиотеки - как, может быть, есть какой-то общий шаблон программирования для подобных вещей (я довольно новичок в векторной анимации) - это приветствуется!
Этолегко сделать с прямыми путями, так же просто, как пример на этой странице ::
path("M114 253").animate({path: "M114 253 L 234 253"});
Но попробуйте изменить код на этой странице, скажем, так: *
path("M114 26").animate({path: "M114 26 C 24 23 234 253 234 253"});
И вы поймете, что я имею в виду.Путь, безусловно, анимируется из его начального состояния (точка "M114 26") до конечного состояния (кривая "C 24 23 234 253 234 253", начиная с точки "M114 26"), но не указанным способом, а не какэто рисуется.
Я не понимаю, как animateAlong может это сделать.Он может анимировать объект вдоль пути, но как я могу сделать так, чтобы этот путь постепенно показывал себя во время анимации объекта вдоль него?
Решение?
(Через ответ peteorpeter .)
Похоже, что в настоящее время лучший способ сделать это - использовать «поддельные» тире с использованием необработанного SVG.Для объяснения см. эту демонстрацию или этот документ , стр. 4.
Как производить прогрессивный рисунок?
Мы должны использовать stroke-dasharray и stroke-dashoffset и знать длину кривой для рисования.Этот код ничего не рисует на экране для круга, эллипса, полилинии, многоугольника или пути:
<[element] style="stroke-dasharray:[curve_length],[curve_length]; stroke-dashoffset:[curve_length]"/>
Если в анимированном элементе значение смещения штрихов уменьшается до 0, мы получаем прогрессивное рисование кривой.
Если вы знаете лучший способ, пожалуйста, оставьте ответ.
Обновление (26 апреля 2012 г.): нашел пример, который хорошо иллюстрирует идею,см. Анимированные кривые Безье .