Как я могу получить доступ, а затем анимировать существующую полилинию листовки с помощью Javascript?

Question

Может кто-нибудь предложить, как я могу получить доступ, а затем анимировать красную ломаную линию, используя javascript:

http://gymloop.lukem.co.uk (войдите: User2 / pass2, затем выберите «Испытания»)

Я хочу анимировать полилинию от первого маркера до конца красной линии (подумайте, Индиана Джонс, но без движения карты и НЕ с использованием карт Google).Он должен быть динамичным, так как разные пользователи будут преодолевать разные расстояния.

Мне нужно решение для работы в FF, IE7 + и Chrome

Я использую листовку от Cloudmade.и я стараюсь не использовать карты Google.

Более подробная информация содержится в моем связанном вопросе по адресу gis. stackexchange

Answer 1

Я проверил ваш код, и кажется, что вы используете API листовки для рисования линий.Из-за этого я решил написать несколько универсальную функцию, которая анимирует такие линии.(Кстати, я запутался, почему этот API использует теги пути вместо строковых тегов, но я с этим справился.)

Вот код: http://jsfiddle.net/mihaibirsan/Wzvre/

Я хотел бы отполировать это немного больше, но я хотел поставить ногу в дверь для этой награды.: D (Я вернусь к полировке и выложу обновление через несколько часов, как только сделаю какую-то другую работу.)

Answer 2

Я настоятельно рекомендую jquery_svg plugin .Я использую его, и есть много функций, включая анимацию, текст на пути, взаимодействие с пользователем.