将After Effects动画实现为代码

Question

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

作为这部动画的输入，我在Adobe 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

在下一步中，更改<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>