更新

Question

我有一个SVG，想要为它制作动画，我是动画SVG的新手。所以我希望圆圈在弯曲的半椭圆形顶部移动，在5分钟内缓慢移动。是否有可能使用CSS动画？到目前为止，我发现了这个简短的解释about curve path，但它并不完全是我想要的，或者我不理解如何实现我的代码。以下是codepen的部分代码编辑：我需要点完全移动到曲线顶部。

＆＃13;

.container{
  position: relative;
    margin: 15% auto;
    width: 300px;
    height: 400px;
    background-color: #212121;
    box-shadow: 0 29px 38px rgba(0,0,0,0.50),
                0 25px 22px rgba(0,0,0,0.30),
                inset 0 0 15px 5px rgb(227, 228, 229);
    border-radius: 15px;
    border: 2px solid;
    border-color: #9E9E9E;
}
.time-container{
  margin: 0 auto;
  width: 180px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0px 130px 50px rgb(132, 2, 2),
              0px 120px 70px rgb(99, 1, 1);
}
.time{
  font-size: 3rem;
  color : #D50000;
  letter-spacing: 3px;
}
.semi-oval{
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="container">
  <div class="time-container"><p class="time">5:00</p></div>
  <div class="semi-oval">
   <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <filter id="shadow">
         <feDropShadow dx="0" dy="10" stdDeviation="6"/>
       </filter>
     </defs>
     <path id="path" d="M10 80 Q 95 10 180 80" stroke="red" stroke-width="2" fill="none" filter="url(#shadow)"/>
     <circle class="circle" cx=15 cy=76 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 />
  </svg>
 </div>
</div>

＆＃13;

Answer 1

使用animationMotion元素沿circle路径移动#path。有关详细信息，请参阅这两个链接。

MDN - animationMotion
CSS-tricks - A Guide to SVG Animations

.container {
  position: relative;
  margin: 15% auto;
  width: 300px;
  height: 400px;
  background-color: #212121;
  box-shadow: 0 29px 38px rgba(0, 0, 0, 0.50), 0 25px 22px rgba(0, 0, 0, 0.30), inset 0 0 15px 5px rgb(227, 228, 229);
  border-radius: 15px;
  border: 2px solid;
  border-color: #9E9E9E;
}

.time-container {
  margin: 0 auto;
  width: 180px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0px 130px 50px rgb(132, 2, 2), 0px 120px 70px rgb(99, 1, 1);
}

.time {
  font-size: 3rem;
  color: #D50000;
  letter-spacing: 3px;
}

.semi-oval {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="time-container">
    <p class="time">5:00</p>
  </div>
  <div class="semi-oval">
    <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <filter id="shadow">
             <feDropShadow dx="0" dy="10" stdDeviation="6"/>
           </filter>
         </defs>
         <circle class="circle" cx="0" cy=0 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 >
             <animateMotion dur="100s" repeatCount="indefinite" rotate="auto" >
                 <mpath xlink:href="#path"/>
             </animateMotion>
         </circle>
         <path id="path" d="M10 80 Q 95 10 180 80" stroke="red" stroke-width="2" fill="none" filter="url(#shadow)"/>
      </svg>
  </div>
</div>

目前，动画持续时间为100s，但您可以更改它。

更新

AnimationMotion有一个名为begin的属性，用于定义动画何时开始。您可以使用它来定义圆应该何时开始沿曲线移动。有关详细信息，请访问这两个链接

曲线路径的Svg动画

1 个答案:

更新