使用Vue重新创建Twitter Heart动画

我最近不得不将Twitter“ fave”动画添加到项目中。

那里（那里和那里）有很多文章描述了动画的工作原理以及如何复制动画。您可以阅读其中的一篇文章，以更好地了解动画的实现方式，但其要点-是使用Sprite和 animation-timing-function: steps。

原始的精灵看起来像这样：

如您所见，心脏实际上包含在精灵中。就我而言，这是一个问题，因为我需要使用我在整个项目中使用的现有SVG心形图标。

好消息是，Twitter更新了其实现方式，并消除了用户的疑虑。现在，他们将SVG图标用于心脏，并且只有粒子在子画面中。他们的新精灵如下：

结果

使用新的精灵和我的自定义图标，我最终得到了这样的结果：

有关重新使用组件的一些注意事项：

• 除非更新精灵，否则需要为图标使用淡红色
• 您可以更换 FavoriteIcon 带有其他任何图标（例如星号）的SVG
• 您可以通过更改尺寸来更新尺寸 font-size 上 .toggle-favorite