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

发布于:2014-08-12 09:27阅读数:

汉堡按钮在界面设计中已经是老生常谈了,但是当我在dribbble看到这个漂亮的过渡动画时,我决定试试用代码实现它。 这是CreativeDash team的原型图: 你可能已经注意到了,汉堡

(via:Tony的博客)原文:How to build a nice Hamburger Button transition in Swift

 
汉堡按钮在界面设计中已经是老生常谈了,但是当我在dribbble看到这个漂亮的过渡动画时,我决定试试用代码实现它。
 
这是 CreativeDash team 的原型图:
你可能已经注意到了,汉堡顶部和底部的线条是来自’X’字符,中间的线条变为外框。我知道这种效果可以用CAShapeLayer创建出来,但是首先我得为三条线分别创建一个CGPath。
 
这种短直线可以手写出来:
  1. let shortStroke: CGPath = { 
  2.     let path = CGPathCreateMutable() 
  3.     CGPathMoveToPoint(path, nil, 2, 2) 
  4.     CGPathAddLineToPoint(path, nil, 28, 2) 
  5.   
  6.     return path 
  7. }() 
 
对于中间的线条,我用Sketch创建了path,从中间开始,然后无缝地过渡到圆形的外框。
 
接下来我导出这个 path 为 SVG 文件,然后将它导入到旧的 PaintCode1 中,它将转换文件为 UIBezierPath 代码片段。然后我按照说明改写了部分代码,创建了一个使用 CGPath 描述的对象:
  1. let outline: CGPath = { 
  2.     let path = CGPathCreateMutable() 
  3.     CGPathMoveToPoint(path, nil, 10, 27) 
  4.     CGPathAddCurveToPoint(path, nil, 12.00, 27.00, 28.02, 27.00, 40, 27) 
  5.     CGPathAddCurveToPoint(path, nil, 55.92, 27.00, 50.47,  2.00, 27,  2) 
  6.     CGPathAddCurveToPoint(path, nil, 13.16,  2.00,  2.00, 13.16,  2, 27) 
  7.     CGPathAddCurveToPoint(path, nil,  2.00, 40.84, 13.16, 52.00, 27, 52) 
  8.     CGPathAddCurveToPoint(path, nil, 40.84, 52.00, 52.00, 40.84, 52, 27) 
  9.     CGPathAddCurveToPoint(path, nil, 52.00, 13.16, 42.39,  2.00, 27,  2) 
  10.     CGPathAddCurveToPoint(path, nil, 13.16,  2.00,  2.00, 13.16,  2, 27) 
  11.   
  12.     return path 
  13. }() 
 
可能有第三方库能够帮助你从 SVG 文件直接加载为 CGPaths,但是这样的 path 我们这里只有这一个,所以用代码写也无所谓啦。
 
在我的 UIButton 子类中,我添加了三个 CAShapeLayer 属性,并设置它们为相应的 path:
  1. self.top.path = shortStroke 
  2. self.middle.path = outline 
  3. self.bottom.path = shortStroke 
 
然后我设置了它们三个的样式:
  1. layer.fillColor = nil 
  2. layer.strokeColor = UIColor.whiteColor().CGColor 
  3. layer.lineWidth = 4 
  4. layer.miterLimit = 4 
  5. layer.lineCap = kCALineCapRound 
  6. layer.masksToBounds = true 
为了正确地计算出它们的边界,我需要将画笔的大小考虑在内。幸运的是,CGPathCreateCopyByStrokingPath 将创建沿用了原先的画笔的轮廓路径,因此它的边框会完全包含 CAShapeLayer 的内容:
  1. let boundingPath = CGPathCreateCopyByStrokingPath(layer.path, nil, 4, kCGLineCapRound, kCGLineJoinMiter, 4) 
  2.   
  3. layer.bounds = CGPathGetPathBoundingBox(boundingPath) 
由于外框将在稍后围绕其最右边的点旋转,我只好在 layers 布局时设置相应的 anchorPoint:
  1. self.top.anchorPoint = CGPointMake(28.0 / 30.0, 0.5) 
  2. self.top.position = CGPointMake(40, 18) 
  3.   
  4. self.middle.position = CGPointMake(27, 27) 
  5. self.middle.strokeStart = hamburgerStrokeStart 
  6. self.middle.strokeEnd = hamburgerStrokeEnd 
  7.   
  8. self.bottom.anchorPoint = CGPointMake(28.0 / 30.0, 0.5) 
  9. self.bottom.position = CGPointMake(40, 36) 
现在,当按钮改变状态时,它应当显示三条线到新位置的动画。接下来的两个外笔划非常简单。对于顶部的线条,我首先将它向内移动4个points,以保持在中心,然后旋转至负45度,形成半个X:
  1. var transform = CATransform3DIdentity 
  2. transform = CATransform3DTranslate(transform, -4, 0, 0) 
  3. transform = CATransform3DRotate(transform, -M_PI_4, 0, 0, 1) 
  4.   
  5. let animation = CABasicAnimation(keyPath: "transform"
  6. animation.fromValue = NSValue(CATransform3D: CATransform3DIdentity) 
  7. animation.toValue = NSValue(CATransform3D: transform) 
  8. animation.timingFunction = CAMediaTimingFunction(controlPoints: 0.25, -0.8, 0.75, 1.85) 
  9. animation.beginTime = CACurrentMediaTime() + 0.25 
  10.   
  11. self.top.addAnimation(animation, forKey: "transform"
  12. self.top.transform = transform 
(底部的线条留给读者作为练习吧。)
 
中部的线条有点麻烦。为了达到预期的效果,我需要单独为 CAShapeLayer 的 strokeStart 和 strokeEnd 属性添加动画。
 
首先,我必须弄清楚在两种状态下的这两个属性正确的值。注意,即使是汉堡包状态下,笔画也不是从0开始。由现有路径延伸略微超过外笔划的左边缘,当应用到 timingFunction 后,我们就完美实现了预期的效果:
  1. let menuStrokeStart: CGFloat = 0.325 
  2. let menuStrokeEnd: CGFloat = 0.9 
  3.   
  4. let hamburgerStrokeStart: CGFloat = 0.028 
  5. let hamburgerStrokeEnd: CGFloat = 0.111 
 
现在我们只需要创建动画,然后添加它们到 layer 中:
  1. let strokeStart = CABasicAnimation(keyPath: "strokeStart"
  2. strokeStart.fromValue = hamburgerStrokeStart 
  3. strokeStart.toValue = menuStrokeStart 
  4. strokeStart.duration = 0.5 
  5. strokeStart.timingFunction = CAMediaTimingFunction(controlPoints: 0.25, -0.4, 0.5, 1) 
  6.   
  7. self.middle.addAnimation(strokeStart, forKey: "strokeStart"
  8. self.middle.strokeStart = menuStrokeStart 
  9.   
  10. let strokeEnd = CABasicAnimation(keyPath: "strokeEnd"
  11. strokeEnd.fromValue = hamburgerStrokeEnd 
  12. strokeEnd.toValue = menuStrokeEnd 
  13. strokeEnd.duration = 0.6 
  14. strokeEnd.timingFunction = CAMediaTimingFunction(controlPoints: 0.25, -0.4, 0.5, 1) 
  15.   
  16. self.middle.addAnimation(strokeEnd, forKey: "strokeEnd"
  17. self.middle.strokeEnd = menuStrokeEnd 
 
将所有代码组合在一起,结果如下:
 
我很高兴完成了。你可以在 GitHub 上找到代码,以及follow我的Twitter

 

CocoaChina是全球最大的苹果开发中文社区,官方微信每日定时推送各种精彩的研发教程资源和工具,介绍app推广营销经验,最新企业招聘和外包信息,以及Cocos2d引擎、Cocos Studio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态,微信在手,天下我有!

请搜索微信号“CocoaChina”关注我们!

搜索CocoaChina微信公众号:CocoaChina

顶部