码迷,mamicode.com
首页 > 移动开发 > 详细

iOS开发>学无止境 - 新浪微博iOS底部功能按钮简单实现

时间:2015-11-29 00:49:20      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

 

以上效果主要涉及点

  1. 九宫格布局

  2. 形变动画

  3. UIView动画

首先,考虑图片的效果,初步采用使用modal控制器来实现,但是考虑到modal最后会移除modal他的控制器的view,所以,还是使用自定义UIView来实现这个功能。

做这种功能,首先实现的是按钮出现位置,后面在实现动画就容易了。

  1. 首先进行九宫格布局,创建模型传入指定数量的按钮,并且使用形变,将所有的按钮移动到看不见的坐标

  2. 点击底部按钮后,设置形变至屏幕区域(这里直接设置成CGAffineTransformIdentity)

  3. 对功能按钮的点击和松开进行监听(实现touches方法也可),按钮点击功能菜单按钮后,使用形变设置按钮变大,松开时,再设置形变变大,并且使其透明度为0

  4. 再点击底部按钮后,设置形变至不可见区域

明确几个功能点后,动画效果就好说了。

  1. 点击底部按钮后,使用UIView弹性动画,每个按钮设置不同的delay,这样就实现了弹簧与时间间隔效果了。

    • (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

  2. 点击功能菜单后,在点击时使用普通UIView动画,使按钮变大,松开时,再次使用UIView,让按钮变大的同时渐渐消失

  3. 再次点击底部按钮后,使用普通的UIView动画,倒序隐藏并缩小按钮

文章来自: tripleCC

项目地址:https://github.com/tripleCC/TPCSpringMenu

iOS开发>学无止境 - 新浪微博iOS底部功能按钮简单实现

标签:

原文地址:http://www.cnblogs.com/xvewuzhijing/p/5003797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!