Анимация пути на схеме проезда

Если вы видели мои схемы проезда, то, наверное, обращали внимание на аккуратные маршруты с анимацией:

Нажмите для просмотра анимацииНажмите для просмотра анимации

В этой заметке я расскажу, как такое делается, но сначала небольшая предыстория.

Однажды меня попросили переделать схему проезда с анимированными путями. Внутри флешки обнаружилась куча полосатых слоёв, все они двигались в различных направлениях (и сильно грузили процессор), а линия пути использовалась как маска для этих слоёв:

Справа — как бы пунктирная линияСправа — как бы пунктирная линия

Что произойдёт на крутом повороте?

На изгибах такой метод косячитНа изгибах такой метод косячит

Во избежание подобных косяков линия разбивается на «элементарные» кусочки, каждый из которых анимируется в отдельном слое. У этого метода есть недостатки. Например, разная длина штрихов пунктира.

Между тем, во флеше есть готовая настраиваемая пунктирная линия. Единственный нюанс — иногда генератор пунктира глючит, поэтому советую сократить количество ключевых точек линии до минимума и ни в коем случае не создавать пересечений. Вот три пунктирные линии на отдельных слоях, в данном случае это минимальное количество:

Разные слои помечены цветомРазные слои помечены цветом

Красивый пунктирный маршрут готов, и осталось его привести в движение.

Идея

Пунктир во флеше генерится от первой точки кривой. Если в каждом следующем кадре подреза́ть линию (со стороны начала), пунктир будет смещаться вдоль всей линии равномерно:

Отрезаем выделенный кусок линии — пунктир смещаетсяОтрезаем выделенный кусок линии — пунктир смещается

Идея проста! Но в интернете я такого не встречал, поэтому пока что считаю авторство своим :)

Нарисовав несколько схем с анимированными маршрутами, я довёл процесс до автоматизма. Сначала «плодим» линию: делаем 8 или 16 копий первого кадра. Затем максимально приближаем начало маршрута и направляющими линиями размечаем один период пунктира на 8 или 16 равных кусочков:

Делим период на равные частиДелим период на равные части

Можно использовать вспомогательные прямоугольники (за 100% взять весь период, а потом трансформировать до 50%, 25% и так далее), а можно размечать на глаз: такие мелкие погрешности обычно не заметны.

Плавная анимация получается при одинаковых сдвигах между соседними кадрами, включая последний с первым.

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

Раскадровочка:

Как видим, пунктир движется ровноКак видим, пунктир движется ровно

Повторяем операции для каждого участка машрута — и готово. Например, здесь аж 7 участков получилось.

Чтобы пересекающиеся линии плавно перетекали друг в друга, надо синхронизировать пунктирные штрихи. Пробуем «запускать» одну из линий с другого кадра: put1.gotoAndPlay(5), и находим подходящий сдвиг по фазе.

Спасибо за внимание! Буду рад, если кому-то этот метод пригодится.

Заметка была полезной? Поделитесь в соцсетях:

7 комментариев
Татьяна
спасибо! Только удалять надо начиная с последнего штриха, иначе не выйдет))
Ваня
Да, иногда из-за этого приходится линию с обратного конца перерисовывать. Можно, конечно, сразу рисовать линию в верном направлении, но что делать при объединении линий — не угадаешь :)
Татьяна
Чтобы не рисовать линию "задом наперед", рисуем ее в нужном направлении, а потом разворачиваем ее (логически, не визуально) нажав спецвыделением (клавиша А) на первую точку пути.
Татьяна
Сорри, в предыдущем посте ошиблась: не выделением, а инструментом PEN изменяется направление пути.
Ваня
Пробовал по-разному — не получается... Напишите, пожалуйста, подробнее, как изменить направление.
Татьяна
Вы рисуете линию в том направлении, в каком удобно. Обязательно снимаете с нее выделение (иначе продолжится рисование этой линии). Потом берете инструмент Pen и подносите к первой точке линии (к той, с которой начинали рисовать). Инструмент Pen должен принять вид пера со слэшем. И кликаете на эту первую точку. Все, путь развернулся. Опробовала и в иллюстраторе и во флэше, у меня работает.
Ваня
Спасибо! Всё получилось, но с одним замечанием. В Иллюстраторе не проверял, но во Флеше так: если кликнуть по одному из концов линии, то включается продолжение рисования с этой точки. Если больше ничего не делать, то направление линии не меняется. Но если поставить ещё одну точку, продолжив линию, то направление изменится. (А эту доп. точку можно затем стереть.) Но этот способ работает, увы, не всегда. Очень бесит то, что нет какого-то универсального способа. Вообще флеш творит с линиями чёрт-те что: даже простое выделение куска линии, а затем снятие выделения приводит к тому, что на линии появляются ключевые точки. Любые манипуляции с кривыми могут привести к появлению кучи дополнительных ключевых точек (при этом внешне линия остаётся такой же). Я надеялся, что в новых версиях Флеша это исправят, но нет.

Ваш комментарий

comments powered by HyperComments

Следующая заметка

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2012