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

概述原文：How to build a nice Hamburger Button transition in Swift 汉堡按钮在界面设计中已经是老生常谈了，但是当我在dribbble看到这个 漂亮的过渡动画时，我决定试试用代码实现它。   这是  CreativeDash team 的原型图： 你可能已经注意到了，汉堡顶部和底部的线条是来自’X’字符，中间的线条变为外框。我知道这种效果可以用CA

原文：@L_502_0@

汉堡按钮在界面设计中已经是老生常谈了，但是当我在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 我们这里只有这一个，所以用代码写也无所谓啦。    在我的 UIbutton 子类中，我添加了三个 CAShapeLayer 属性，并设置它们为相应的 path：  
    self.top.path=shortstroke    self.mIDdle.path=outline    self.bottom.path=shortstroke  
   然后我设置了它们三个的样式：  
    layer.fillcolor=nil    layer.strokecolor=UIcolor.whitecolor().CGcolor    layer.linewidth=4    layer.miterlimit=4    layer.lineCap=kCAlineCapRound    layer.masksToBounds=true  
   为了正确地计算出它们的边界，我需要将画笔的大小考虑在内。幸运的是，CGPathCreatecopyByStrokingPath 将创建沿用了原先的画笔的轮廓路径，因此它的边框会完全包含 CAShapeLayer 的内容：  
    letboundingPath=CGPathCreatecopyByStrokingPath(layer.path,4,kCGlineCapRound,kCGlineJoinMiter,4)        layer.bounds=CGPathGetPathBoundingBox(boundingPath)  
   由于外框将在稍后围绕其最右边的点旋转，我只好在 layers 布局时设置相应的 anchorPoint：  
    self.top.anchorPoint=CGPointMake(28.0/30.0,0.5)    self.top.position=CGPointMake(40,18)        self.mIDdle.position=CGPointMake(27,27)    self.mIDdle.strokeStart=hamburgerstrokeStart    self.mIDdle.strokeEnd=hamburgerstrokeEnd        self.bottom.anchorPoint=CGPointMake(28.0/30.0,0.5)    self.bottom.position=CGPointMake(40,36)  
   现在，当按钮改变状态时，它应当显示三条线到新位置的动画。接下来的两个外笔划非常简单。对于顶部的线条，我首先将它向内移动4个points，以保持在中心，然后旋转至负45度，形成半个X：  
    vartransform=CAtransform3DIDentity    transform=CAtransform3DTranslate(transform,-4,0)    transform=CAtransform3DRotate(transform,-M_PI_4,1)        letanimation=CABasicAnimation(keyPath:"transform")    animation.fromValue=NSValue(CAtransform3D:CAtransform3DIDentity)    animation.tovalue=NSValue(CAtransform3D:transform)    animation.timingFunction=camediatimingFunction(controlPoints:0.25,-0.8,0.75,1.85)    animation.beginTime=CACurrentMediaTime()+0.25        self.top.addAnimation(animation,forKey:"transform")    self.top.transform=transform  
   （底部的线条留给读者作为练习吧。）    中部的线条有点麻烦。为了达到预期的效果，我需要单独为 CAShapeLayer 的 strokeStart 和 strokeEnd 属性添加动画。    首先，我必须弄清楚在两种状态下的这两个属性正确的值。注意，即使是汉堡包状态下，笔画也不是从0开始。由现有路径延伸略微超过外笔划的左边缘，当应用到 timingFunction 后，我们就完美实现了预期的效果:  
    letmenustrokeStart:CGfloat=0.325    letmenustrokeEnd:CGfloat=0.9        lethamburgerstrokeStart:CGfloat=0.028    lethamburgerstrokeEnd:CGfloat=0.111  
   现在我们只需要创建动画，然后添加它们到 layer 中：  
    letstrokeStart=CABasicAnimation(keyPath:"strokeStart")    strokeStart.fromValue=hamburgerstrokeStart    strokeStart.tovalue=menustrokeStart    strokeStart.duration=0.5    strokeStart.timingFunction=camediatimingFunction(controlPoints:0.25,-0.4,0.5,1)        self.mIDdle.addAnimation(strokeStart,forKey:"strokeStart")    self.mIDdle.strokeStart=menustrokeStart        letstrokeEnd=CABasicAnimation(keyPath:"strokeEnd")    strokeEnd.fromValue=hamburgerstrokeEnd    strokeEnd.tovalue=menustrokeEnd    strokeEnd.duration=0.6    strokeEnd.timingFunction=camediatimingFunction(controlPoints:0.25,1)        self.mIDdle.addAnimation(strokeEnd,forKey:"strokeEnd")    self.mIDdle.strokeEnd=menustrokeEnd  
   将所有代码组合在一起，结果如下：    我很高兴完成了。你可以在  GitHub上找到代码，以及  follow我的Twitter。           总结       
以上是内存溢出为你收集整理的用 Swift 制作一个漂亮的汉堡按钮过渡动画全部内容，希望文章能够帮你解决用 Swift 制作一个漂亮的汉堡按钮过渡动画所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1088496.html