Simple Note

一个切换动画的实现

2016.02.01

Codepen上看到一个很不错的切换动画,如上所示,花了点时间琢磨是怎么实现的。

切换动画可以划分成4个部分:

  1. 背景颜色渐变
  2. 边框颜色突变,因背景的原因看起来有一种渐变的错觉
  3. 圆形变成月牙形
  4. 圆形移动中先变小再恢复原大小

一旦拆分开感觉就简单了不少,颜色的渐变无非是transition属性,大小变化可以在animation中设置几个节点的scale属性。而圆变月牙,是在圆的移动过程中,另一个看不见的圆慢慢追赶上来遮住了圆的一部分形成的。

怎么弄一个看不见的圆?透明的不行,因为还需要能遮挡别的圆,所以这个圆的颜色得和背景颜色相同。可是背景颜色是变化的呀,于是这个看不见的圆的颜色也必须同步变化,实现的时候只需要给隐形圆和背景设置相同的transition过渡时间和效果曲线,这里使用1s和默认的ease

两圆怎么追赶?开始的时候为了不遮挡,两个圆是分开的,而移动结束的时候两圆重叠,说明隐形圆的移动速度更快,想了想其实不用关心速度,只用给两个圆的动画设置相同的时间和不同的终点,浏览器会帮我们计算速度的...

以上这些都还好,但是我做完的时候却是下面这个样子:

边框也被遮住了...理想情况应该是边框罩住两圆,隐藏圆罩住另一个圆,有人可能说设z-index属性就好了呀,怎么设呢?圆一:-1,圆二:-2,边框还是被遮。那把外层容器设成10,这样z-index是容器>圆一>圆二,仍然不行...四处搜索,发现z-index属性并没有之前想的那么简单,这篇文章介绍的挺好。可是看完了还是不能帮我补上边框,这时回到codepen一看,原来原作者在容器上设置了overflow: hidden,如法炮制,果然解决了,至于为什么,仍在困惑中。

到这里就完成了,如题图所示,可以直接点击查看效果。

Comments
Write a Comment