tripleCC的技术博客

ʕ•̫͡•ʔ-̫͡-ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ-̫͡-ʕ•͓͡•ʔ-̫͡-ʔ

新浪微博iOS底部功能按钮简单实现

效果图

以上效果主要涉及点

  • 1.九宫格布局

  • 2.形变动画

  • 3.UIView动画

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

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

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

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

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

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

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

  • 1.点击底部按钮后,使用UIView弹性动画,每个按钮设置不同的delay,这样就实现了弹簧与时间间隔效果了。
1
+ (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动画,倒序隐藏并缩小按钮

github:代码地址

Comments