在代码中实现After Effects动画
在代码中实现After Effects动画
提问于 2020-12-12 23:39:54
我正在开发一个网页应用程序，它在主页上有一些奇特的动画，但我想在考虑到性能和响应限制的情况下接近它。
作为这个动画的输入，我有一个在Adobe After Effects上模拟波浪运动的相当复杂的视频动画。我想将此动画转换为使用SVG和JS动画的代码。我现在拥有的是一个静态的SVG图像，我需要将它动画化，使其看起来像视频。
我尝试了https://greensock.com/morphsvg/，它给了我一个不太差的动画，但它是一个有点棘手的过程，找到正确的形状的SVG来再现视频。然后我遇到了https://lottiefiles.com/plugins/after-effects，但它不支持动画中的后效效果，比如波浪变形。
因此，我正在寻求关于如何使这个动画成功的建议。
编辑:这是我想要实现的https://streamable.com/bwfmm3。
回答 1
Stack Overflow用户
发布于 2020-12-13 04:32:33
让我试着展示一下在不使用笨重框架的情况下创建wave和动画的技术。
第1步。
我们在矢量编辑器中绘制或提取一个wave的已完成代码
<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步。
再添加两个wave副本。您可以添加任意数量的波浪。
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65266769
复制相关文章
相似问题
腾讯云开发者
