如何将一个图标转换为另一个图标

Question

是否可以将一种形状转换为另一种形状，例如两个 SVG 图标。一个是鸟 (twitter)，一个是 F (facebook)。所以我想做一个动画把小鸟的形状转换成F。例子：http://www.tiikoni.com/tis/view/?id=2f3905c

我不知道该怎么做，但它非常有效。人们已经创建了类似的样式，例如将菜单按钮转换为关闭按钮。但是我不确定什么技术可以帮助创建它。

所以请让我知道我该怎么做。以及任何可能的例子。提前致谢！

Answer 1

有许多 JavaScript 库可以帮助解决这个问题 - 您应该搜索的术语是 SVG 变形。

下面是一个使用 SVG Morpheus 的例子：

var iconElement = document.getElementById('icon');
var icon = new SVGMorpheus(iconElement, { rotation: 'none' });


iconElement.addEventListener('click', function() {
  // Morph to the icon with the given ID
  icon.to('square');
});

<script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js"></script>

<svg id="icon">
  <!-- Place each icon in a group (<g> tag) with a unique ID -->
  <g id="square">
    <rect width="100" height ="100" />
  </g>
  <g id="circle">
    <ellipse rx="50" ry="50" cx="50" cy="50" />
  </g>
</svg>

Answer 2

另一种可能不适合质量目的的替代方法是制作一个带有动画的 gif。

如何将一个图标转换为另一个图标

How to transform one icon to another

javascript

css

animation

svg

html5-canvas