Реализация анимации After Effects в коде

Question

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

В качестве входных данных для этой анимации я использую довольно сложную видео анимацию, созданную в Adobe After Effects, которая имитирует движение волн. Я хотел бы перевести эту анимацию в код с использованием SVG и JS-анимации. Теперь у меня есть статическое изображение SVG, и мне нужно его анимировать, чтобы оно выглядело как видео.

Я попробовал использовать https://greensock.com/morphsvg/, что дает мне неплохую анимацию, но это немного сложный процесс, чтобы найти правильные формы SVG для воспроизведения видео.

Затем я наткнулся на https://lottiefiles.com/plugins/after-effects, но он не поддерживает эффекты After Effects, которые присутствуют в анимации, такие как Wave Warp

Поэтому я ищу совета, как сделать эту анимацию успешной.

_{Свободный перевод вопроса Implementation of an After Effects animation to code от участника @Théo Lavaux.}

Answer 1

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

Шаг #1.

Рисуем в векторном редакторе или берем готовый код одной волны.

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- Исходная волна не отображается, поскольку находится в разделе <defs> -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
      <!-- Первая копия волны -->
   <use xlink:href="#Marine-wave" x="50" y="3" fill="#4579e2">
   
   </use>
     
  </g>
</svg>

Шаг #2

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- Волна не видна так как находится в секции <defs>  -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
         <!-- Третья копиия волны -->
   <use xlink:href="#Marine-wave" x="50" y="-3" fill="#4579e2">
   </use> 
         <!-- Вторая копия волны -->
  <use xlink:href="#Marine-wave" x="50" y="-1" fill="#3461c1"  >
   </use> 
      <!-- Первая копия волны -->
   <use xlink:href="#Marine-wave" x="50" y="2" fill="#2d55aa"  >
   </use>
     
  </g>
</svg>

Добавляем ещё две копии волны. Вы можете добавить сколько угодно волн по своему вкусу.

Шаг #3

На следующем шаге изменяете координаты x и y для тега <use>, чтобы сдвинуть волны относительно друг друга.

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- Волна не видна так как находится в секции <defs> -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
         <!-- Третья копия  волны -->
   <use xlink:href="#Marine-wave" x="-50" y="0" fill="#4579e2">
   </use> 
         <!-- Вторая копия  волны -->
  <use xlink:href="#Marine-wave" x="0" y="2" fill="#3461c1"  >
   </use> 
      <!-- Первая копия  волны -->
   <use xlink:href="#Marine-wave" x="50" y="4" fill="#2d55aa"  >
   </use>
     
  </g>
</svg>

Шаг #4

Добавляете анимацию горизонтального смещения одной волны

<animateTransform attributeName="transform" type="translate" 
   begin="0s" dur="6s" values="50;25;0;25;50;25;50" repeatcount="indefinite" />

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- Волна не видна так как находится в секции <defs> 
 -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
         <!-- Третья копия  волны -->
   <use xlink:href="#Marine-wave" x="-50" y="0" fill="#4579e2"> 
         <!-- Добавить анимацию смещения горизонтальной волны для копии третьей волны -->
      <animateTransform attributeName="transform" type="translate" begin="0s" dur="6s" values="95;25;95" repeatcount="indefinite" /> 
   </use> 
         <!-- Вторая копия  волны -->
  <use xlink:href="#Marine-wave" x="0" y="2" fill="#3461c1" opacity="0.75" >
   </use> 
      <!-- Первая копия  волны -->
   <use xlink:href="#Marine-wave" x="50" y="4" fill="#2d55aa" opacity="0.75"  >
   </use>
     
  </g>
</svg>

Шаг #5

Добавляете анимацию горизонтального смещения для других волн

Для точной настройки временных интервалов волновой анимации добавьте атрибуты:

values="95;25;50;95"
keyTimes="0;0.45;0.70;1"

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- Волна не видна так как находится в секции <defs>  -->
  <path 
    id="Marine-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
    
 </defs>
  <g class="waves"> 
         <!-- Третья копиия волны -->
   <use xlink:href="#Marine-wave" x="-50" y="0" fill="#4579e2"> 
         <!-- Добавить анимацию смещения горизонтальной волны для копии третьей волны -->
      <animateTransform
      attributeName="transform"
      type="translate"
      begin="0s"
      dur="4s"
      values="95;25;95"
      repeatcount="indefinite" /> 
   </use> 
         <!-- Вторая копиия волны -->
  <use xlink:href="#Marine-wave" x="0" y="2" fill="#3461c1" opacity="1" > 
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="0s"
        dur="4s"
        values="25;95;25"
        repeatcount="indefinite" /> 
   </use> 
      <!-- Первая копиия волны -->
   <use xlink:href="#Marine-wave" x="70" y="6" fill="#2d55aa" opacity="1"  >
       <animateTransform
        attributeName="transform"
        type="translate"
        begin="0s"
        dur="8s"
        values="95;25;50;95"
        keyTimes="0;0.45;0.70;1"
        repeatcount="indefinite" /> 
   </use>
     
  </g>
</svg>

_{Свободный перевод ответа от участника @Alexandr_TT.}

БЛОГ НА HUSL