AwesomeMenu的Swift版定制改写之旅:SDiffuseMenu

项目介绍：

AwesomeMenu的Swift版改写之旅:SDiffuseMenu

本动画是Swift版的AwesomeMenu,如需OC版还请移步这里。

Swift Diffuse Menu 简写为: SDiffuseMenu,
我是刚从OC转Swift不久，还请大神多多指教

实际效果如下：

一、使用方法如下：

添加协议(动画状态回调) -> 设置选项数组 -> 设置菜单按钮 -> 动画属性配置 -> .addSubview(menu)

1、添加协议class ViewController: UIViewController, SDiffuseMenuDelegate { var menu: SDiffuseMenu! }2、设置菜单的选项按钮数据guard let storyMenuItemImage = UIImage(named:'menuitem-normal.png') else { fatalError('图片加载失败') } guard let storyMenuItemImagePressed = UIImage(named:'menuitem-highlighted.png') else { fatalError('图片加载失败') } guard let starImage = UIImage(named:'star.png') else { fatalError('图片加载失败') } guard let starItemNormalImage = UIImage(named:'addbutton-normal.png') else { fatalError('图片加载失败') } guard let starItemLightedImage = UIImage(named:'addbutton-highlighted.png') else { fatalError('图片加载失败') } guard let starItemContentImage = UIImage(named:'plus-normal.png') else { fatalError('图片加载失败') } guard let starItemContentLightedImage = UIImage(named:'plus-highlighted.png') else { fatalError('图片加载失败') } var menus = [SDiffuseMenuItem]() for _ in 0 ..< 9 { let starMenuItem = SDiffuseMenuItem(image: storyMenuItemImage, highlightedImage: storyMenuItemImagePressed, contentImage: starImage, highlightedContentImage: nil) menus.append(starMenuItem) }3、设置菜单按钮let startItem = SDiffuseMenuItem(image: starItemNormalImage, highlightedImage: starItemLightedImage, contentImage: starItemContentImage, highlightedContentImage: starItemContentLightedImage)4、添加SDiffuseMenulet menuRect = CGRect.init(x: self.menuView.bounds.size.width/2, y: self.menuView.bounds.size.width/2, width: self.menuView.bounds.size.width, height: self.menuView.bounds.size.width) menu = SDiffuseMenu(frame:menuRect, startItem:startItem, menusArray:menus as NSArray) menu.center = self.menuView.center menu.delegate = self self.menuView.addSubview(menu)5、动画配置

动画中半径的变化:0--> 最大farRadius--> 最小nearRadius--> 结束endRadius

// 动画时长 menu.animationDuration = CFTimeInterval(animationDrationValue.text!) // 最小半径 menu.nearRadius = CGFloat((nearRadiusValue.text! as NSString).floatValue) // 结束半径 menu.endRadius = CGFloat((endRadiusValue.text! as NSString).floatValue) // 最大半径 menu.farRadius = CGFloat((farRadiusValue.text! as NSString).floatValue) // 单个动画间隔时间 menu.timeOffset = CFTimeInterval(timeOffSetValue.text!)! // 整体角度 menu.menuWholeAngle = CGFloat((menuWholeAngleValue.text! as NSString).floatValue) // 整体偏移角度 menu.rotateAngle = CGFloat(0.0) // 展开时自旋角度 menu.expandRotation = CGFloat(M_PI) // 结束时自旋角度 menu.closeRotation = CGFloat(M_PI * 2) // 是否旋转菜单按钮 menu.rotateAddButton = rotateAddButton.isOn // 菜单按钮旋转角度 menu.rotateAddButtonAngle = CGFloat((rotateAddButtonAngleValue.text! as NSString).floatValue) // ..6、动画过程监听func SDiffuseMenuDidSelectMenuItem(_ menu: SDiffuseMenu, didSelectIndex index: Int) { print('选中按钮at index:\(index) is: \(menu.menuItemAtIndex(index)) ') } func SDiffuseMenuDidClose(_ menu: SDiffuseMenu) { print('菜单关闭动画结束') } func SDiffuseMenuDidOpen(_ menu: SDiffuseMenu) { print('菜单展开动画结束') } func SDiffuseMenuWillOpen(_ menu: SDiffuseMenu) { print('菜单将要展开') } func SDiffuseMenuWillClose(_ menu: SDiffuseMenu) { print('菜单将要关闭') }二、Swift转写之旅

总的来说，动画的原理还是比较简单的，论文，主要涉及到的内容是CABasicAnimation、CAKeyframeAnimation以及事件响应链相关知识，下边分两部分介绍之。

1、CAPropertyAnimation动画

在SDiffuseMenu中动画用CAPropertyAnimation的子类CABasicAnimation和CAKeyframeAnimation来实现，关于这两个子类简述如下：

CABasicAnimation其实可以看作是一种特殊的关键帧动画,只有头尾两个关键帧,可实现移动、旋转、缩放等基本动画;

CAKeyframeAnimation则可以支持任意多个关键帧,关键帧有两种方式来指定,使用path或values;

path可以是CGPathRef、CGMutablePathRef或者贝塞尔曲线,注意的是：设置了path之后values就无效了;values则相对灵活, 可以指定任意关键帧帧值;

keyTimes可以为values中的关键帧设置一一对应对应的时间点,其取值范围为0到1.0,keyTimes没有设置的时候,各个关键帧的时间是平分的;

..

更多的动画知识请戳此处

#p#分页标题#e#

相关的指南、示例代码可以通过点击页面右上角查询按钮进行查询，官方文档大多点到为止，挺适合入门学习的，更深的还是需要在实践中摸索总结。

2、动画分析

不论多么复杂的动画，都是由简单的动画组成的，大家先看看SDiffuseMenu中单选项动画：

仔细分析发现可以将整个动画可以拆分为三大部分：

菜单按钮的自旋转，通过transform属性即可实现；

选项按钮的整体展开动画，实际是在定时器中依次添加单个选项按钮的动画组，控制timeInterval来实现动画的先后执行顺序；

单个选项按钮的动画则拆分为3部分：展开动画、结束动画和点击动画，都是动画组，下边以结束动画为例，简单介绍其实现过程。

2.1、单个选项关闭动画分析：

动画过程：点击菜单关闭动画 -> 菜单旋转复位；选项按钮自旋+从endRadius移动到farRadius ->选项按钮到达farRadius之后：开始返回+同时自旋转 -> 然后回到起始点。

1、自旋

大家仔细看会发现展开动画和结束动画的自旋转是有差异的，因为关键帧设置的不同。

展开动画中设置的关键帧如下，0.3对应expandRotation展开自选角度，0.4对应0°，开题报告，所以在0.3 -> 0.4的时间会出现快速的自旋。

rotateAnimation.values = [CGFloat(expandRotation),CGFloat(0.0)] rotateAnimation.keyTimes = [NSNumber(value: 0.3 as Float), NSNumber(value: 0.4 as Float)]

而关闭的动画中，我设置如下，细化了关键帧，可以看出自旋的动画细节丰富一些，0 -> 0.4 慢速自旋，0.4 -> 0.5 快速自旋。

rotateAnimation.values = [CGFloat(0.0),CGFloat(closeRotation),CGFloat(0.0)] rotateAnimation.keyTimes = [NSNumber(value: 0.0 as Float),NSNumber(value: 0.4 as Float), NSNumber(value: 0.5 as Float)]

2、移动

移动的控制源于path是怎样设定的，代码中我写了两种方法，其中一种是注释掉了。

let positionAnimation = CAKeyframeAnimation(keyPath: 'position') positionAnimation.duration = animationDuration

1)