原文:How to build a nice Hamburger Button transition in Swift
汉堡按钮在界面设计中已经是老生常谈了,但是当我在dribbble看到这个
漂亮的过渡动画时,我决定试试用
代码实现它。
你可能已经注意到了,汉堡顶部和
底部的线条是来自’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 我们这里只有这一个,所以用代码写也无所谓啦。