javascript - 将 After Effects 动画实现为代码

Question

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

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

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

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

编辑:这是我想要实现的目标 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。

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

<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>