欢迎加入QQ讨论群258996829

Swift 菜单动画效果 SDiffuseMenu

发布时间:2017-01-19 11:39  回复:0  查看:4977  感兴趣:34  赞:1   最后回复:2017-01-19 11:39  

SDiffuseMenu: Swift版AwesomeMenu, 点击菜单后选项按钮四散的动画效果。OC版本点击这里

实际效果如下:

Swift 菜单动画效果 SDiffuseMenu

一、使用方法如下:

添加协议(动画状态回调) -> 设置选项数组 -> 设置菜单按钮 -> 动画属性配置 -> .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、添加SDiffuseMenu

let 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("菜单将要关闭")
}


相关开源代码

您还未登录,请先登录

热门帖子

最新帖子