CSS/JS 图标变形

Question

在 web.whatsapp.com 中，当您聚焦或模糊联系人搜索字段时，会发生一个很酷的小变形。 html 看起来像这样（我没认出那里有什么重要的东西）：

<button class="icon icon-search-morph" data-reactid=".0.1:$main.2.2.0">
  <div class="icon icon-back-blue" data-reactid=".0.1:$main.2.2.0.0"></div>
  <div class="icon icon-search" data-reactid=".0.1:$main.2.2.0.1"></div>
</button>

通过尝试完成类似的事情，我遇到了 this awesome library (demo here) 但我不知道 whatsapp/facebook 人是如何做到的，我想知道完成它的最佳方法。我也不喜欢需要 svgs（而不是 webfonts）的 svg-morpheus 技术，但也许这是唯一的选择？

（如果您不使用 web.whatsapp，基本上它是从一个图标到另一个图标的动画过渡（变形）。在 whatsapp 应用程序中，它是后退箭头和放大镜之间的变形）

Answer 1

它可能是用 SVG 动画/变形完成的

https://css-tricks.com/svg-shape-morphing-works/

现在基本上图标/png 是矢量图形，可以很容易地调整，因为它们只是基于文本。您甚至可以将动画放在实际图像代码中。或者简单地与 jquery 和 css 类一起使用，例如：

svg.animating {
    transform: rotate(90deg);
}

这会将您的 svg 旋转 90°

http://www.w3schools.com/svg/ 有关 svg 的更多信息

Answer 2

Whatsapp Web 使用两个相互重叠的图标（其中一个有 opacity:0）

这是一个 tutorial 的（我刚做的，因为这是一个有趣的技术）。

这里是 codepen。

本教程使用 MaterializeCSS and the Google icon font。下面的这个例子是在没有这些的情况下实现的，只是作为一个快速演示。

但我想，你想做一些 Whatsapp Web 风格的东西（Material 设计），所以 MaterializeCSS 和 Google 图标字体是两个非常有用的来源。

.anim-container {
 height:4rem;
 width:4rem;
 transition:.3s;
 position:relative;
 cursor:pointer;
 }
 .anim-container .icons {
  transition:.3s;
  position:absolute;
  font-size:4em !important;
  height:1em;
  width:1em;
 }
 .anim-container .arr {
  transform:rotate(-135deg);
  opacity:0;
 }
 
.anim-container.morphed {
 transform:rotate(135deg);
 }
 .anim-container.morphed .arr {
  opacity:1;
 }
 .anim-container.morphed .search {
  opacity:0;
 }

.anim-container.small {
 height:2rem;
 width:2rem;
 font-size:.5rem;
}

<div class="anim-container small" onclick="this.classList.toggle('morphed')">
 <img src="https://maxcdn.icons8.com/windows10/PNG/32/Arrows/left_arrow-32.png" class="icons arr">
 <img src="https://maxcdn.icons8.com/Android_L/PNG/24/Very_Basic/search-24.png" class="icons search">
</div>
<div style="opacity:.7;">
 These two icons are from
 <a href="https://icons8.com" target="_blank">Icons8</a>
</div>

Answer 3

Whatsapp 覆盖 2 个图标，并为它们的大小和不透明度设置动画。

这是一个复制他们的动画的例子，它适用于任何图标。

document.querySelectorAll('.morphing-icons').forEach(div => {
  div.addEventListener('click', e => {
    div.classList.toggle('morphed')
  })
})

.morphing-icons {
     position: relative;
     cursor: pointer;
}
 .morphing-icons i {
     position: absolute;
     user-select: none;
     top: 0;
     left: 0;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
 .morphing-icons i:first-of-type {
     transform: rotate(0);
}
 .morphing-icons i:last-of-type {
     opacity: 0;
     transform: scale(0.8) rotate(225deg);
}
 .morphing-icons.morphed i:first-of-type {
     opacity: 0;
     transform: rotate(135deg);
}
 .morphing-icons.morphed i:last-of-type {
     opacity: 1;
     transform: scale(1) rotate(1turn);
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div class="morphing-icons">
  <i class="material-icons" style="color:#919191">search</i>
  <i class="material-icons" style="color:#33b7f6">arrow_back</i>
</div>

<div class="morphing-icons" style="margin-left:32px">
  <i class="material-icons">play_arrow</i>
  <i class="material-icons">pause</i>
</div>

CSS/JS 图标变形

CSS/JS Icon morphing

javascript

css

animation