Как постепенно рисовать векторный путь? (Raphael.js)

Как постепенно анимировать векторный контур, как будто он нарисован? Другими словами, медленно показывать пиксель пути на пиксель.

Я использую 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 уменьшится до 0, мы получим прогрессивное рисование кривой.

Если вы знаете способ получше, оставьте ответ.

Обновление (26 апреля 2012 г.): нашел пример, хорошо иллюстрирующий идею, см. Анимированные кривые Безье .