html - 带有 SVG 路径的提眉动画

Question

我正在尝试使用 SVG 为眉毛制作动画。但是因为我没有得到适当的教程来显示 path="" 中使用的数字的含义和用法而卡住了(如果您知道，请分享教程链接)。任何人都请帮我抬起笑脸的眉毛。这是我的代码

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow1"/>
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow2"/>
 </svg> 

我正在尝试跟随。抱歉代码错误:P

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow1"/>
  <animateMotion 
									 xlink:href="#eyebrow1" 
									 dur="1.2s" 
									 fill="freeze"
									 calcMode="spline"
									 keyTimes="0; 0.5; 1"
									 keySplines="0 0 1 1;
															 .42 0 .58 1;"
									 path ="M30, 20 Q27, 10 35, 20"
									 />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow2"/>
 </svg> 

Answer 1

您可以简单地使用 animateTransform，因为您正在为您的路径使用变换并且您必须指定类型(在这里您可以使用翻译)以及 from 和 to为了指定动画的开始/结束点:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow1"/>
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow2"/>
  
 <animateTransform 
      xlink:href="#eyebrow1"
      attributeName="transform" 
      attributeType="XML"
      type="translate"
      from="9 17"
      to="9 22" 
      dur="2s"
      begin="0s"
      repeatCount="indefinite"
      />
       <animateTransform 
      xlink:href="#eyebrow2"
      attributeName="transform" 
      attributeType="XML"
      type="translate"
      from="40 17"
      to="40 22" 
      dur="2s"
      begin="0s"
      repeatCount="indefinite"
      />
 </svg>

正如我在之前的回答 ( SVG path positioning ) 中针对您的问题所描述的那样，您可以使用 g 元素同时为它们设置动画:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <g transform="translate(10,20)" id="eyebrow">

  <path d="M16, 20 Q27, 10 35, 20" fill="none" stroke="#000" stroke-width="1.5px" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(30,0)" fill="none" stroke="#000" stroke-width="1.5px" />
  
  </g>
  
  <animateTransform 
      xlink:href="#eyebrow"
      attributeName="transform" 
      attributeType="XML"
      type="translate"
      from="10 15" 
      to="10 22" 
      dur="2s"
      begin="0s"
      repeatCount="indefinite"
      fill="freeze" 
      />
</svg>

这里有一些有用的链接:

https://css-tricks.com/guide-svg-animations-smil/

https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/