使用 SVG 路径提升眉毛动画 [英] Eyebrow raising animation with SVG path

问题描述

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

I am trying to animate eyebrows with SVG. But got stuck as I am not getting proper tutorial showing the meaning and use of numbers used in path="" (please share a tutorial link if you know any). Anyone please help me with raising the smiley's eyebrows. Here is my code

<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

I was trying with following. Sorry for bad code :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> 

推荐答案

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

You can simply use the animateTransform since you are using transform for you path and you have to specify the type (here you can use translate) and the from and to in order to specify the start/end point of animation:

<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 路径定位)中所述，问题，您可以使用 g 元素同时为它们设置动画:

And as I described in my previous answer (SVG path positioning) for your question, you can use g element to be able to animate them both at the same time:

<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>

这里有一些有用的链接:

Here is some useful links :

https://css-tricks.com/guide-svg-animations-微笑/

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

这篇关于使用 SVG 路径提升眉毛动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！