弹框按钮视图

前言

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

前言二

源码在这里
我自己也简单的实现了一遍，看看效果👇

我也把源码上传到github了

分析一波

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

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

• 定义每一个按钮视图的其实位置和最终位置
• 未每个按钮视图添加动画

按钮位置

先来看看按钮视图的最终位置👇

给每个视图定大小很简单：先定死高度为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的使用很简单，首先定义动画要做什么，什么时候开始执行，动画的起始和结束位置等等。。。动画定义完成之后，将该动画附加到一个视图上面，这里就是将弹簧动画赋予按钮视图；然后每个按钮视图的动画的执行时间都是按一定间隔隔开的。这样就完成了上图所展示的效果。

参考

• PopMenu
• Facebook POP开源库