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

效果图

以上效果主要涉及点

  • 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动画,倒序隐藏并缩小按钮

github:代码地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 12,727评论 6 30
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,506评论 25 709
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 10,550评论 5 13
  • 有时我会想,也许最好的生活方式便是将每一天当做自己的末日。用这样的态度去生活,生命的价值方可以得以彰显。我们本应纯...
    小灵哥哥阅读 3,627评论 2 7
  • 悬疑推理专题的首期周报希望大家多多支持 主编:浮华小哥 编辑:苏篱落 祥梦青荷 1.夏午君:《偷胎换骨》 “我该怎...
    浮华小哥阅读 4,542评论 10 19

友情链接更多精彩内容