动画弹出式按钮OXExpandingButtonBar

介绍:

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


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


效果图:

    



导入:

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


使用:

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

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

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

/**
 * 展开子按钮
 **/
- (void)showButtonsAnimated;

/**
 * 收起子按钮
 **/
- (void) hideButtonsAnimated;

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

if (bar.isExpanding) {
    // 如果已展开
    [bar hideButtonsAnimated]; 
}


自定义:

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

- (void)setMainRotate:(float)rotate;

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


- (void)setMainReRotate:(float)rotate;

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


- (void)setAnimated:(BOOL)animated;

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


- (void)setSpin:(BOOL)b;

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


- (void)setEndY:(float)endy;

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


- (void)setFarY:(float)fary;

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


- (void)setNearY:(float)neary;

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


- (void)setMainAlpha:(float)alpha;

设置主按钮未展开时的alpha值。默认为你对主按钮设置的alpha值。

注意:在创建主按钮时,需要自行设置初始的alpha值,与此处设置的一般一致


- (void)setMainAnimationTime:(float)time;

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


- (void)setSubAnimationTime:(float)time;

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


- (void)setDelay:(float)time;

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


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


转载请注明出处,谢谢

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Vue的transition组件来实现点击按钮弹出弹框的动画效果。具体实现步骤如下: 1. 在Vue组件中添加一个按钮,并为其绑定一个点击事件。 2. 在Vue组件中定义一个data属性,用于控制弹框的显示和隐藏状态。 3. 使用Vue的transition组件包裹弹框内容,并设置name属性。 4. 在transition组件中使用v-if指令控制弹框的显示和隐藏。 5. 在transition组件中使用CSS样式定义弹框的进入和离开动画效果。 以下是一个简单的示例代码: ```html <template> <div> <button @click="showModal = true">点击弹出弹框</button> <transition name="modal"> <div class="modal-mask" v-if="showModal"> <div class="modal-wrapper"> <div class="modal-container"> <!-- 弹框内容 --> <h3>这是一个弹框!</h3> <p>点击右上角的X可以关闭弹框。</p> </div> </div> </div> </transition> </div> </template> <script> export default { data() { return { showModal: false } } } </script> <style> .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .modal-wrapper { display: inline-block; background-color: #fff; border-radius: 4px; padding: 20px; } .modal-enter-active, .modal-leave-active { transition: opacity 0.3s; } .modal-enter, .modal-leave-to { opacity: 0; } </style> ``` 在上面的示例代码中,当点击按钮时,showModal属性的值会变为true,弹框就会显示出来,同时触发进入动画效果。当点击弹框右上角的X按钮关闭弹框时,showModal属性的值会变为false,弹框就会隐藏起来,同时触发离开动画效果。你可以根据自己的需求修改样式或动画效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值