Анимация растровой картинки самолёта вдоль svg пути

#css #css3 #html5 #svg #анимация

Для реализации сценки полета самолёта с Дедом морозом на борту я нашел два растровых
изображения :  

Наряженная ёлочка в зимнем лесу 

 

и изображение Деда Мороза с подарками в самолёте

 

В векторном редакторе я нарисовал траекторию движения самолёта и совместил её с растровым
изображением ёлки.   

  

Код трассы полёта самолёта: 








Как реализовать анимацию самолёта вдоль этой трассы и приземление его на лесную полянку
около ёлочки. 
    

Ответы

Ответ 1

Добавляем растровую картинку зимнего леса в векторный редактор и рисуем путь повторяющий,
заданную трассу полёта самолёта 

 


Узловые точки добавляем инструментом - рисовать кривые Безье(на рисунке цифра 1 )  


Выделяем узлы
делаем их автоматически сглаженными. Рычагами управления узловых точек корректируем
форму кривой.  


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











многократный повтор     

Добавляем в команды анимации - repeatCount="indefinite"