创建动画SVG路径
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了创建动画SVG路径相关的知识，希望对你有一定的参考价值。
我正在尝试将一个相关的SVG路径绘制到div块，该块也根据当前动画状态动画其他元素的不透明度。基本上类似于：“我们的哲学”下的https://www.biggerpicture.agency/about-us#main。
我设法创建我的六边形形状并使用stroke-dashoffset方法设置动画，但我正在努力研究如何包含动画来操纵其他div块的不透明度。如果你们能给我一个如何做到这一点的提示，那会很棒。
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 600 600" xml:space="preserve">
<path class="polygon" d="M267,30l271,146l14,262L329,566L26,380l70.9-254.3L267,30z"/>
</svg>
<style>
.polygon {
fill: none;
stroke: white;
stroke-width: 3;
stroke-dasharray: 1650;
stroke-dashoffset: 1650;
animation-name: draw-polygon;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
@keyframes draw-polygon {
to {
stroke-dashoffset: 0;
}
}
</style>
答案
一种方法是只为其他对象创建动画，并使用animation-delay让它们在线条达到您想要的长度时开始。
.polygon {
fill: none;
stroke: black;
stroke-width: 3;
stroke-dasharray: 1650;
stroke-dashoffset: 1650;
animation-name: draw-polygon;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
@keyframes draw-polygon {
to {
stroke-dashoffset: 0;
}
}
.circle1, .circle2 {
opacity: 0;
animation-name: fade-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
.circle1 {
animation-delay: 1100ms;
}
.circle2 {
animation-delay: 1500ms;
}
@keyframes fade-in {
to {
opacity: 1;
}
}<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400" height="400" viewBox="0 0 600 600" xml:space="preserve">
<path class="polygon" d="M267,30l271,146l14,262L329,566L26,380l70.9-254.3L267,30z"/>
<circle class="circle1" cx="538" cy="176" r="40"/>
<circle class="circle2" cx="552" cy="438" r="40"/>
</svg>以上是关于创建动画SVG路径的主要内容，如果未能解决你的问题，请参考以下文章