弹框按钮视图

前言

这段时间又在忙项目的事,对Coding-iOS源码的学习只能先暂搁一旁。今天抽空来看看一个Coding-iOS中一个有趣的实现。这个和微博里面发送微博时的动效类似。效果如下👇
weibo

前言二

源码在这里
我自己也简单的实现了一遍,看看效果👇
weibomy
我也把源码上传到github

分析一波

这个PopMenu主要由2部分构成:模糊背景和按钮

  1. 模糊背景
    模糊背景直接就是白色半透明的View,它是PopMenu这个View的最底层的子View。这个模糊背景View的透明度从0->0.5渐变,当这个动画完成之后,开始显示按钮的动画。
  2. 按钮
    说是按钮,其实也是一个自定义的View,它由一个图片(UIImageView)和一个标题(UILabel)构成。这些按钮也是PopMenu这个View的子View。
  3. PopMenu View
    这个View是主视图,它包括最底层的模糊背景视图和多个按钮视图。在这个视图内部定义了几个重要的方法
    • 定义每一个按钮视图的其实位置和最终位置
    • 未每个按钮视图添加动画

按钮位置

先来看看按钮视图的最终位置👇
finalPosition
给每个视图定大小很简单:先定死高度为110,再根据每行放置几个按钮定义按钮的宽度(例如本文每行3个按钮,那就屏幕宽度除以3);最后定义按钮在PopMenu视图中的位置,也就是它的左上角相对于主视图的坐标,这个稍加计算就可得出。
而每个按钮其实开始的位置是在屏幕上方的,那么每个按钮的起始位置也就是最终位置向上平移一个相同的量,直至移出屏幕上方为止。

下落动画

仔细瞧瞧,每个按钮的下落动画是一样的,只是开始时间不同而已。所以这些按钮动画的设置只需用开始时间进行区分即可。这里的动画使用了POPAnimation,它是Facebook的一个著名的开源库。
来看看动画的源代码👇

        - (void)startAnimationFromPosition:(CGRect)from toPosition:(CGRect)to atView:(UIView *)view beginTime:(CFTimeInterval)beginTime {
            POPSpringAnimation *springAnimation = [POPSpringAnimation animation]; // 新建一个弹簧动画
            springAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewFrame]; // 这个动画作用于View的Frame
            springAnimation.removedOnCompletion = YES; // 动画执行结束后删除该动画
            springAnimation.beginTime = beginTime + CACurrentMediaTime(); // 定义动画开始时间, 现在时间加上一个动画执行延迟
            springAnimation.springBounciness = 6; // 定义弹簧动画弹动程度
            springAnimation.springSpeed = 2; // 定义动画的速度

            springAnimation.fromValue = [NSValue valueWithCGRect:from]; // 定义动画开始位置
            springAnimation.toValue = [NSValue valueWithCGRect:to]; // 定义动画结束位置

            [view pop_addAnimation:springAnimation forKey:@"vanney9"]; // 给视图添加该动画,这个视图就是上面的按钮视图
        }

        // 按钮调用动画
        [self startAnimationFromPosition:from toPosition:to atView:button beginTime:0.1 * index];

POPAnimation的使用很简单,首先定义动画要做什么,什么时候开始执行,动画的起始和结束位置等等。。。动画定义完成之后,将该动画附加到一个视图上面,这里就是将弹簧动画赋予按钮视图;然后每个按钮视图的动画的执行时间都是按一定间隔隔开的。这样就完成了上图所展示的效果。

参考

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器