Анимация полета самолёта с одновременным изменением его размера

Question

На одном из сайтов видел анимацию полёта самолёта с одновременным увеличением, уменьшением размера самолёта во время полёта вдоль трассы движения.

Ниже картинки, показывающие изменения размера самолёта в зависимости от место положения на трассе.

Как реализовать анимацию изменения размеров самолёта во время анимации движения вдоль трассы полёта?

Answer 1

Выбираем карту с нанесенными городами

Выбираем Юникод иконки самолета ✈ ✈

Так как это по сути текстовый элемент, то можно его стилизовать как текст, подбирая размер, цвет, координаты.
Для анимации движения самолёта вдоль трассы используется animateMotion
Для анимации изменения размеров самолёта используется animateTransform c type="scale"

<!-- Анимация полета самолетов вдоль маршрута  -->
  <text  fill="dodgerblue" y="3.5" x="-5" font-size="10px"  >  &#9992; 
    <animateMotion id="AnM" dur="8s" begin="svg1.click" fill="freeze" rotate="auto"   >
    <mpath xlink:href="#Moskwa" />
    </animateMotion>
          <!-- Анимация увеличения, уменьшения размера самолёта -->
    <animateTransform  attributeName="transform" type="scale" keyTimes="0;0.2;0.8;1" values="1.5;4;4;2.5" dur="8s" begin="svg1.click" fill="freeze" />
</text>

Для всех остальных самолётов фрагмент кода, показанного выше повторяется.

Различия лишь в <mpath xlink:href="#Moskwa" /> трасс полёта

Ниже полный код.

Анимация начнется после клика

Просьба смотреть в развернутом сниппете

.s0{fill:none;}
.container{
width:100vw;
height:100vh;
}

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 900 500" preserveAspectRatio="xMinYMin meet">



<image xlink:href="https://i.stack.imgur.com/VHI8O.png" width="100%" height="100%" /> 
    <!-- Трассы движения самолётов -->
 <path id="Moskwa" stroke="red" stroke-width="2" d="m262.2 360c0 0 52.8-99.6-44.3-116.7-58.7-10.4-109.7 52.1-109.7 52.1" class="s0"/>
  <path id="Vladivostok" d="m795.9 456.4c0 0-42.5-77.1-74.7-105.8-39.9-35.6-89-63.8-140.8-77-49.5-12.7-103.7-12.2-153.3 0-60.3 14.8-164.9 86.4-164.9 86.4" style="fill:none;stroke-width:2;stroke:#354ce7"/>
  <path id="Sankt-Peterburg" d="m262.2 360c0 0-10.3-83.1-38.9-108.9-27.4-24.7-107.4-26.5-107.4-26.5" style="fill:none;stroke-width:2;stroke:#5cd52d"/>
  <path id="Kaliningrad" d="m262.2 360c0 0-53.9-166.1-126-189.8C94.5 156.4 12.4 215.3 12.4 215.3" style="fill:none;stroke-width:2;stroke:#3761dc"/>
  <path id="Smolensk" d="m262.2 360c0 0-67.9-104.5-123-113.6-24.4-4-67.7 30.3-67.7 30.3" style="fill:none;stroke-width:2;stroke:#d52dce"/>
  <path id="Pyatigorsk" stroke="purple" stroke-width="2" d="m262.2 360c0 0-106.2-48.5-154.8-28.8-66.1 26.8-47.5 95.7-47.5 95.7" class="s0"/>
 
 <!-- Анимация полета самолетов вдоль маршрута  -->
  <text  fill="dodgerblue" y="3.5" x="-5" font-size="10px"  >  &#9992; 
    <animateMotion id="AnM" dur="8s" begin="svg1.click" fill="freeze" rotate="auto" restart="whenNotActive"   >
    <mpath xlink:href="#Moskwa"  />
    </animateMotion>
          <!-- Анимация увеличения, уменьшения размера самолёта -->
    <animateTransform  attributeName="transform" type="scale" keyTimes="0;0.2;0.8;1" values="1.5;4;4;2.5" dur="8s" begin="svg1.click" fill="freeze" restart="whenNotActive" />
</text>   
   <text  fill="purple" y="3.5" x="-5" font-size="10px"  >  &#9992; 
    <animateMotion id="AnV" dur="16s" begin="svg1.click" fill="freeze" rotate="auto" restart="whenNotActive"  >
    <mpath xlink:href="#Vladivostok" />
    </animateMotion>
    <animateTransform  attributeName="transform" type="scale" keyTimes="0;0.2;0.8;1" values="3;6;6;3" dur="16s" begin="svg1.click"  fill="freeze" restart="whenNotActive" />
   </text> 
<text  fill="crimson" y="3.5" x="-5" font-size="10px"  >  &#9992; 
    <animateMotion id="AnS" dur="8s" begin="svg1.click+5.5s" fill="freeze" rotate="auto" restart="whenNotActive"   >
    <mpath xlink:href="#Kaliningrad" />
    </animateMotion>
    <animateTransform  attributeName="transform" type="scale" keyTimes="0;0.2;0.8;1" values="1.5;4;4;2.5" dur="8s" begin="svg1.click+5.5s"  fill="freeze" restart="whenNotActive" />
</text>       
    <text  fill="green" y="3.5" x="-5" font-size="10px"  >  &#9992; 
        <animateMotion id="AnS" dur="8s" begin="svg1.click+2s" fill="freeze" rotate="auto" restart="whenNotActive">
           <mpath xlink:href="#Sankt-Peterburg" />
        </animateMotion>
        <animateTransform  attributeName="transform" type="scale" keyTimes="0;0.2;0.8;1" values="1.5;4;4;2.5" dur="8s" begin="svg1.click+2s"  fill="freeze" restart="whenNotActive" />
    </text>      
<text  fill="brown" y="3.5" x="-5" font-size="10px"  >  &#9992; 
        <animateMotion id="AnS" dur="8s" begin="svg1.click+5s" fill="freeze" rotate="auto" restart="whenNotActive">
           <mpath xlink:href="#Smolensk" />
        </animateMotion>
        <animateTransform  attributeName="transform" type="scale" keyTimes="0;0.2;0.8;1" values="1.5;4;4;2.5" dur="8s" begin="svg1.click+5s"  fill="freeze" restart="whenNotActive" />
</text>  
      <text  fill="purple" y="3.5" x="-5" font-size="10px"  >  &#9992; 
        <animateMotion id="AnS" dur="8s" begin="svg1.click+8s" fill="freeze" rotate="auto" restart="whenNotActive">
           <mpath xlink:href="#Pyatigorsk" />
        </animateMotion>
        <animateTransform  attributeName="transform" type="scale" keyTimes="0;0.2;0.8;1" values="1.5;4;4;2.5" dur="8s" begin="svg1.click+8s"  fill="freeze" restart="whenNotActive" />
      </text>           
</svg>
</div>

БЛОГ НА HUSL

Анимация полета самолёта с одновременным изменением его размера

Ответы (1 шт):