前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS动画弹出式按钮

iOS动画弹出式按钮

作者头像
Cloudox
发布2021-11-23 11:24:31
9290
发布2021-11-23 11:24:31
举报
文章被收录于专栏:月亮与二进制

介绍:

OXExpandingButtonBar是一个弹出按钮的控件。首先有一个主按钮,点击主按钮后,主按钮旋转,并向上弹出一串子按钮。弹出时子按钮会旋转,并且到达最终位置后还会反弹一下,还是挺萌的哈哈。再次点击主按钮,主按钮会反向旋转回来,子按钮也会向下反向旋转着收回来。

这里的主按钮和子按钮都是在本控件外自行设置的,所以子按钮的响应方法也可以方便地在自己的ViewController里设置。在初始化本控件前,要创建主按钮和子按钮数组。可以查看我的示例看看怎么使用,还是挺简单的~

效果图:

导入:

只用复制OXExpandingButtonBar.h和OXExpandingButtonBar.m文件到你的工程中,就可以进入import调用了,很方便。可以在这里下载。

使用:

首先要对控件进行初始化,上面也说了,所有的按钮都是在初始化本控件之前需要自己创建的,直接在ViewController里,创建你的主按钮和所有子按钮,子按钮放到一个数组里面,在这个过程中你的子按钮的响应方法也就可以自行设置了。然后还要设置一个CGPoint变量,用于对按钮位置进行定位。

代码语言:javascript
复制
/** 
 * 初始化bar 
 * 参数:mainButton:主按钮;buttons:子按钮数组;center:中心点 
**/  
- (id) initWithMainButton:(UIButton*)mainButton  
                  buttons:(NSArray*)buttons  
                   center:(CGPoint)center;  

也可以使用这个方法来从别的地方展开或收起子按钮串:

代码语言:javascript
复制
/** 
 * 展开子按钮 
 **/  
- (void)showButtonsAnimated;  
  
/** 
 * 收起子按钮 
 **/  
- (void) hideButtonsAnimated;  

使用“isExpanding”属性可以判断子按钮是否已弹出。如:

代码语言:javascript
复制
if (bar.isExpanding) {  
    // 如果已展开  
    [bar hideButtonsAnimated];   
}  

自定义:

有一些属性可以自行定义,这部分也在不停考虑和增加中,有建议的可以告诉我~ 已实现定义方法如下:

代码语言:javascript
复制
- (void)setMainRotate:(float)rotate;  

设置展开时主按钮旋转到的角度。默认为0度。

代码语言:javascript
复制
- (void)setMainReRotate:(float)rotate;  

设置收起时主按钮旋转到的角度。默认为45度。

代码语言:javascript
复制
- (void)setAnimated:(BOOL)animated; 

设置子按钮弹出及收回是否动画。包括主按钮旋转动画、主按钮改变透明度的延时、子按钮旋转动画、子按钮弹出、收回的动画,若设为NO则全部取消动画。默认为YES。

代码语言:javascript
复制
- (void)setSpin:(BOOL)b;  

设置弹出子按钮时是否旋转子按钮。默认为YES。

代码语言:javascript
复制
- (void)setEndY:(float)endy;  

设置子按钮最终位置之间的高度距离。默认为30。

代码语言:javascript
复制
- (void)setFarY:(float)fary;  

设置子按钮弹出动画弹到的最远高度距离。默认为30。

代码语言:javascript
复制
- (void)setNearY:(float)neary;  

设置子按钮弹出动画反弹时的最近高度距离。默认为15。

代码语言:javascript
复制
- (void)setMainAlpha:(float)alpha;  

设置主按钮未展开时的alpha值。默认为你对主按钮设置的alpha值。 注意:在创建主按钮时,需要自行设置初始的alpha值,与此处设置的一般一致

代码语言:javascript
复制
- (void)setMainAnimationTime:(float)time;  

设置主按钮旋转动画时间。默认为0.3秒。

代码语言:javascript
复制
- (void)setSubAnimationTime:(float)time;  

设置子按钮弹出和旋转动画时间。默认为0.4秒。

代码语言:javascript
复制
- (void)setDelay:(float)time;  

设置子按钮之间的间隔时间;也影响主按钮延迟改变透明度的时间。默认为0.1秒。

以上就是关于动画弹出式按钮OXExpandingButtonBar的介绍,可以查看https://github.com/Cloudox/OXExpandingButtonBar获取示例工程。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/11/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 介绍:
  • 效果图:
  • 导入:
  • 使用:
  • 自定义:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档