用 Swift 制作一个漂亮的汉堡按钮过渡动画

原文：How to build a nice Hamburger Button transition in Swift

汉堡按钮在界面设计中已经是老生常谈了，但是当我在dribbble看到这个 漂亮的过渡动画时，我决定试试用代码实现它。

这是 CreativeDash team的原型图：

你可能已经注意到了，汉堡顶部和底部的线条是来自’X’字符，中间的线条变为外框。我知道这种效果可以用CAShapeLayer创建出来，但是首先我得为三条线分别创建一个CGPath。

这种短直线可以手写出来：

 
 

  
  
letshortStroke:CGPath={
  
  
letpath=CGPathCreateMutable()
  
  
CGPathMoveToPoint(path,nil,2,2)
  
  
CGPathAddLineToPoint(path,28,2)
  
  

  
  
returnpath
  
  
}()
 
 

对于中间的线条，我用Sketch创建了path，从中间开始，然后无缝地过渡到圆形的外框。

接下来我导出这个 path 为 SVG 文件，然后将它导入到旧的 PaintCode1 中，它将转换文件为 UIBezierPath 代码片段。然后我按照说明改写了部分代码，创建了一个使用 CGPath 描述的对象：

  
  
letoutline:CGPath={
  
  
letpath=CGPathCreateMutable()
  
  
CGPathMoveToPoint(path,10,27)
  
  
CGPathAddCurveToPoint(path,12.00,27.00,28.02,40,27)
  
  
CGPathAddCurveToPoint(path,55.92,50.47,2.00,27,2)
  
  
CGPathAddCurveToPoint(path,13.16,40.84,52.00,52)
  
  
CGPathAddCurveToPoint(path,52,42.39,27)
  
  

  
  

  可能有第三方库能够帮助你从 SVG 文件直接加载为 CGPaths，但是这样的 path 我们这里只有这一个，所以用代码写也无所谓啦。