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（演示here），但我不知道whatsapp / facebook人是如何做到的，我想知道最好的方法完成它。我也没有卖svg-morpheus技术需要svgs（而不是webfonts），但也许这是唯一的选择？

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

Answer 1

Whatsapp Web使用两个相互重叠的图标（其中一个图标有en.json）

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

这是codepen。

本教程使用MaterializeCSS和Google icon font。下面的例子不是那些，而只是作为一个快速的演示。

但我想，你想要以Whatsapp Web（Material Design）的风格做一些事情，所以MaterialiseCSS和Google Icon字体是两个非常有用的资源。

opacity:0

.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;
}

Answer 2

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>

Answer 3

它可能是用SVG动画/变形

完成的

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

现在基本上icon / png是可以轻松调整的矢量图形，因为它们只是基于文本的。您甚至可以将动画放在实际的图像代码中。或者只使用jquery和css类，如：

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

将你的svg旋转90°

http://www.w3schools.com/svg/了解svg的更多信息