Question

我试图抓住当您将鼠标悬停在Facebook上的“赞”按钮上时发生的SVG动画。我在代码中找不到动画版本。我基本上想要在可能的情况下提取一个并使其脱机运行。它看起来像这样：

http://o.aolcdn.com/hss/storage/midas/ab614b29e3cee096e557141d52bcfde5/202776437/2015-10-08+18_12_22.gif

真的很感激这里的任何见解。这是我能找到的代码，但它似乎没有动画。

Answer 1

为什么不尝试制作自己的SMIL动画？看看这里的演示：https://jsfiddle.net/09aLov71/2/ 它并不完美，但它会给你一个想法。有关更多文档，请参阅此处：https://www.w3.org/TR/REC-smil/

<circle r=15 fill="yellow"/>
<circle r=0 cy="6" fill="white">
  <animate 
    id="a1"
    begin="icon.mouseenter"
    attributeName="r"
    values="0;8"
    dur="0.5s"
    fill="freeze"
    />
  <animate 
    id="a2"
    begin="a1.end"
    attributeName="r"
    values="8;4;7;3;8"
    dur="1s"
    repeatCount="indefinite"
    fill="freeze"/>
  <animate 
    id="a3"
    to="0"
    begin="icon.mouseleave"
    attributeName="r"
    repeatCount="1"
    dur="1s"
    fill="freeze"/>
</circle>
<circle cx="-5" cy="-2" r="2" fill="black">
  <animate begin="a1.begin" values="-2;-6" attributeName="cy" fill="freeze" dur="0.5s"/>
  <animate begin="a1.begin" values="-5;-8" attributeName="cx" fill="freeze" dur="0.5s"/>
  <animate begin="a3.begin" to="-2" attributeName="cy" fill="freeze" dur="1s"/>
  <animate begin="a3.begin" to="-5" attributeName="cx" fill="freeze" dur="1s"/>
</circle>
<circle cx="5" cy="-2" r="2" fill="black">
  <animate begin="a1.begin" values="-2;-6" attributeName="cy" fill="freeze" dur="0.5s"/>
  <animate begin="a1.begin" values="5;8" attributeName="cx" fill="freeze" dur="0.5s"/>
  <animate begin="a3.begin" to="-2" attributeName="cy" fill="freeze" dur="1s"/>
  <animate begin="a3.begin" to="5" attributeName="cx" fill="freeze" dur="1s"/>
</circle>

如何保存FB反应SVG动画？

1 个答案: