一個第三方登錄底部彈出框，彈出帶動畫，效果圖如下：
首先我們先自定義下圖的這樣一個控件：
KKView.h
<pre>
import <UIKit/UIKit.h>
typedef void(^KKBlock)(NSInteger index);
@interface KKView : UIView
@property (nonatomic, strong) UIButton *iconBtn;
@property (nonatomic, strong) UILabel *iconLabel;
@property (nonatomic, copy) KKBlock block;
- (void)selectedIndex:(KKBlock)block;
@end
</pre>
然后在.m中創建視圖
<pre>- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.iconBtn = [UIButton buttonWithType:(UIButtonTypeCustom)];
_iconBtn.frame = CGRectMake(self.frame.size.width/2-25, 0, 50, 50);
_iconBtn.clipsToBounds = YES;
_iconBtn.layer.cornerRadius = 25;
[_iconBtn addTarget:self action:@selector(btnClick:) forControlEvents:(UIControlEventTouchUpInside)];
_iconBtn.backgroundColor = [UIColor redColor];
self.iconLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 60, self.frame.size.width, 20)];
[_iconLabel setTextAlignment:(NSTextAlignmentCenter)];
_iconLabel.font = [UIFont systemFontOfSize:14];
_iconLabel.text = @"測試";
_iconLabel.textColor = [UIColor blackColor];
[self addSubview:self.iconBtn];
[self addSubview:self.iconLabel];
}
return self;
}</pre>
自定義一個動畫效果的展示圖層
KKAnimation.h
<pre>#import <UIKit/UIKit.h>
typedef void(^KKIndexBlock)(NSInteger index);
typedef void(^KKBtnBlock)(UIButton *btn);
@interface KKAnimationView : UIView
@property (nonatomic, copy) KKIndexBlock indexBlock;
@property (nonatomic, copy) KKBtnBlock btnBlock;
/**
- 初始化動畫視圖
- @param titleArray title數組
- @param picArray 圖標數組
*/
- (id)initWithTitleArray:(NSArray *)titleArray picArray:(NSArray *)picArray;
/**
- 視圖展示
*/
- (void)show;
/**
- 選中的index
*/
- (void)selectedWithIndex:(KKIndexBlock)block;
/**
- 按鈕block
*/
- (void)KKBtnBlock:(KKBtnBlock)block;
</pre>
循環創建 底部按鈕 KKAnimation.m
<pre>for (int i = 0; i < 4; i++) {
KKView *kk = [[KKView alloc] initWithFrame:CGRectMake(i%4*(kScreenW/4), 20, kScreenW/4, 90)];
kk.tag = 100+i;
kk.iconBtn.tag = i+1;
[kk.iconBtn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%@", picArray[i]]] forState:(UIControlStateNormal)];
[kk.iconLabel setText:[NSString stringWithFormat:@"%@", titleArray[i]]];
[kk selectedIndex:^(NSInteger index) {
[self dismiss];
self.indexBlock(index);
}];
[self.largeView addSubview:kk];
}
</pre>
最后實現動畫方法 (show)
<pre>- (void)show
{
UIWindow *window = [[UIApplication sharedApplication].windows firstObject];
[window addSubview:self];
[UIView animateWithDuration:0.2 animations:^{
[UIView setAnimationCurve:(UIViewAnimationCurveEaseOut)];
_largeView.transform = CGAffineTransformMakeTranslation(0, -HH);
} completion:^(BOOL finished) {
for (int i = 0; i < 4; i ++) {
CGPoint location = CGPointMake(kScreenW / 4 * (i%4) + (kScreenW / 8), 45);
KKView *kk = (KKView *)[self viewWithTag:100 + i];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.03 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0.8 options:(UIViewAnimationOptionCurveEaseOut) animations:^{
kk.center = location;
} completion:nil];
});
}
}];
}
</pre>
附上github地址：https://github.com/you12138/LogInAnimation
