gpt4 book ai didi

html - SVG图像波浪动画

转载 作者:搜寻专家 更新时间:2023-10-31 19:29:11 24 4
gpt4 key购买 nike

我正在这里制作动画 我有一个 SVG 图像 我正在尝试像波浪一样连续移动图像。我已经尝试使用 gsap 和 css 仍然没有得到。任何人都可以建议我任何帮助将不胜感激

GSAP

TweenMax.to("#turbwave", 8, {
attr:{"baseFrequency":0.01},
repeat:-1,
yoyo:true
});

@keyframes wave {
0% {
left: -80px;
}
100% {
left: 0;
}
}

.container {
width: 100px;
overflow: hidden;
}

.container svg {
position: relative;
left: -50px;
width: 200px;
animation: wave 2s linear infinite;
}
<svg id="wave" xmlns="http://www.w3.org/2000/svg" width="1920" height="780" viewBox="0 0 1920 780">
<g>
<g opacity=".75">
<path fill="#ffefdd" d="M518.416 278.813c100.975 408.098 513.434 328.466 588.907 253.974 75.473-74.493 153.228-259.973 324.949-282.534 154.635-20.315 317.211-182.93 487.728-78.482v453.068c-264.98 2.452-323.019-161.187-601.137 25.146-320.667 214.84-339.51 105.56-508.484 75.563S535.477 828.256 326.51 643.775C188.975 522.356 98.538 508.728 0 535.407V0h260.293c113.729 39.308 218.825 119.99 258.123 278.813z"/>
</g>
</g>
</svg>

最佳答案

您目前不能像 answer you linked 中的那样为您的 SVG 设置动画的原因是它们通过平移波浪并让每一面匹配来伪造波浪。如果您删除该答案示例中的设置宽度,您可以清楚地看到:

@keyframes wave {
0% {
left: -80px;
}
100% {
left: 0;
}
}

.container {
width: 100px;
overflow: hidden;
}
.container svg {
position: relative;
left: -50px;
width: 200px;
animation: wave 2s linear infinite;
}
<div class="container">
<svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
.st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
<path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>
</div>

为了使您的 SVG 像波浪一样动画化,它会更加复杂,因为末端彼此不匹配。您可能需要使用 SVG 动画工具,例如 GSAP 的 MorphSVG(这是一个付费插件,但您可以在 CodePen 上免费试用)。

对于 MorphSVG,我建议制作 2 或 3 个不同的 SVG,然后使用 MorphSVG 在它们之间制作动画。在 GreenSock 网站上有几个如何执行此操作的示例。

有关 MorphSVG 的更多信息,请参阅 the GreenSock page for it

关于html - SVG图像波浪动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56881487/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com