在代码中实现 After Effects 动画

Question

我正在开发一个网页应用，它在主页上有一些精美的动画，但我想在处理它时考虑到性能和响应限制。

作为此动画的输入，我在 Adob​​e After Effects 上制作了一个相当复杂的视频动画，用于模拟波浪运动。我想将此动画转换为使用 SVG 和 JS 动画的代码。我现在拥有的是静态 SVG 图像，我需要对其进行动画处理，使其看起来像视频。

我尝试了https://greensock.com/morphsvg/，它给了我一个不错的动画，但是找到正确的 SVG 形状来重现视频有点棘手。 然后我遇到了https://lottiefiles.com/plugins/after-effects，但是它不支持Wave Warp等动画中的After Effects效果。

因此，我正在寻求有关如何使该动画成功的建议。

编辑：这是我想要达到的目标https://streamable.com/bwfmm3。

Answer 1

让我尝试展示在不使用庞大框架的情况下创建波浪和动画它们的技术。

第 1 步。

我们在矢量编辑器中绘制或取一波完成的代码

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <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"> 
      <!-- First copy wave -->
   <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>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <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"> 
         <!-- Third wave copy -->
   <use xlink:href="#Marine-wave" x="50" y="-3" fill="#4579e2">
   </use> 
         <!-- Second wave copy -->
  <use xlink:href="#Marine-wave" x="50" y="-1" fill="#3461c1"  >
   </use> 
      <!-- First copy wave -->
   <use xlink:href="#Marine-wave" x="50" y="2" fill="#2d55aa"  >
   </use>
     
  </g>
</svg>

步骤 #3。

在下一步中，更改<use> 标记的x 和 y 坐标，以相对于彼此移动波浪。

<svg class="svg1"
   xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
 <defs>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <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"> 
         <!-- Third wave copy -->
   <use xlink:href="#Marine-wave" x="-50" y="0" fill="#4579e2">
   </use> 
         <!-- Second wave copy -->
  <use xlink:href="#Marine-wave" x="0" y="2" fill="#3461c1"  >
   </use> 
      <!-- First copy wave -->
   <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>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <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"> 
         <!-- Third wave copy -->
   <use xlink:href="#Marine-wave" x="-50" y="0" fill="#4579e2"> 
         <!-- Add animation of horizontal wave displacement Third wave copy -->
      <animateTransform attributeName="transform" type="translate" begin="0s" dur="6s" values="95;25;95" repeatcount="indefinite" /> 
   </use> 
         <!-- Second wave copy -->
  <use xlink:href="#Marine-wave" x="0" y="2" fill="#3461c1" opacity="0.75" >
   </use> 
      <!-- First copy wave -->
   <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>  
     <!-- The original wave is not visible as it is in the <defs> section -->
  <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"> 
         <!-- Third wave copy -->
   <use xlink:href="#Marine-wave" x="-50" y="0" fill="#4579e2"> 
         <!-- Add animation of horizontal wave displacement Third wave copy -->
      <animateTransform attributeName="transform" type="translate" begin="0s" dur="4s" values="95;25;95" repeatcount="indefinite" /> 
   </use> 
         <!-- Second wave copy -->
  <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> 
      <!-- First copy wave -->
   <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>