【iOS】制作类似于微博、百思发布界面的特效动画
2017-09-06 本文已影响235人
NotFunGuy
一言不合先上效果图
仿百思不得姐发布界面动画
仿微博发布界面动画
实现思路分析
在微博、简书、百思这些app中的底部tabbar的中间会有一个提供给用户的发布按钮，这个发布按钮的布局可以通过自定义UITabBar来实现。发布的动画效果这里使用facebook的pop动画框架，支持objective-C和swift语言。pop的github地址.
实现步骤
一、自定义UITabBar布局底部UITabBarItem
关于自定义UITabBar可以看前面很详细的一篇文章UITabBarController的使用详解及其自定义
二、发布界面添加毛玻璃效果
毛玻璃效果在现在很流行，这也是一种比较高端的效果，实现毛玻璃效果的方式，这里用最简单的方式，直接加一张UI做好的图片。详细内容可以查看【iOS】 一个模糊(毛玻璃)效果引发的探索
三、实现动画效果
百思的动画和微博的动画很相似，只是方向不一样，百思从上到下，微博从下到上。
界面中间小方格是自定义的按钮，自定义实现了图片在上文字在下的布局。这个比较简单就不在这里叙述，demo里面比较详细。动画效果的实现步骤
- 先让控制器的
view不能点击（要加载完了才能点击）； - 加载中间的按钮，按钮就是一个九宫格布局的方式；
- 循环添加按钮，同时设置动画效果，动画执行完毕再恢复点击事件。
百思动画效果
// 1.让控制器的view不能点击
self.view.userInteractionEnabled = NO;
// 2. 数据
NSArray *images = @[@"publish-video", @"publish-picture", @"publish-text", @"publish-audio", @"publish-review", @"publish-offline"];
NSArray *titles = @[@"发视频", @"发图片", @"发段子", @"发声音", @"审帖", @"离线下载"];
// 3.设置中间的按钮 这里是6个 当然也可以是服务器返回的数量 但是计算方法都一样
int maxCols = 3; // 一排最多三个
CGFloat btnW = 72;
CGFloat btnH = btnW + 38;
CGFloat btnStartY = (ScreenH - 2 * btnH) * 0.5;
CGFloat btnStartX = 20;
CGFloat xMargin = (ScreenW - 2 * btnStartX - maxCols * btnW) / (maxCols - 1);
int index = 6;
for (int i = 0; i < images.count; i++) { // 循环添加按钮
// 4.初始化按钮
LMHVerticalButton * btn = [[LMHVerticalButton alloc]init];
btn.tag = i;
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
// 5. 设置按钮的内容
btn.titleLabel.font = [UIFont systemFontOfSize:14];
[btn setTitle:titles[i] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:images[i]] forState:UIControlStateNormal];
// 6.计算当前按钮的X/Y
int row = i / maxCols; //所在行
int col = i % maxCols; // 所在列
CGFloat btnX = btnStartX + col * (xMargin + btnW);
CGFloat btnEndY = btnStartY + row * btnH;
CGFloat btnBeginY = btnEndY - ScreenH;
// 7.给按钮添加弹簧动画
POPSpringAnimation * anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
anim.fromValue = [NSValue valueWithCGRect:CGRectMake(btnX, btnBeginY, btnW, btnH)];
anim.toValue = [NSValue valueWithCGRect:CGRectMake(btnX, btnEndY, btnW, btnH)];
anim.springBounciness = 10; //springBounciness为弹簧弹力 取值范围为【0，20】， 默认为4
anim.springSpeed = 10; //springSpeed为弹簧速度 速度越快 动画时间越短 取值范围[0,20], 默认为12 和springBounciness一起决定弹簧动画效果
anim.beginTime = CACurrentMediaTime() + animationDelay * index; // 动画开始的时间 每个按钮的时间不同 通过这个时间来设置按钮出现的顺序
[btn pop_addAnimation:anim forKey:nil];
[anim setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
// 动画执行完毕 恢复点击事件
self.view.userInteractionEnabled = YES;
}];
index --;
}
解释代码
按钮的添加其实是一个九宫格布局的方式。要实现先从右到左从下到上的的动画布局(如gif中从后面到前面的添加方式),可以设置一个index，在动画的开始时间beginTime的时候添加一个延迟加载的时间，先加载后面的，再加载前面的anim.beginTime = CACurrentMediaTime() + animationDelay * index;。
为了实现从上掉下来的效果，给按钮添加开始执行时候的y坐标btnBeginY设置为<=0,如果要实现类似于微博的从下到上的效果，改变btnBeginY以达到在屏幕下方就行。同时这个不同于百思，是顺序添加，那么也需要改变动画的延迟时间
微博发布界面的动画代码
// 1.让控制器的view不能点击
self.view.userInteractionEnabled = NO;
// 2. 数据
NSArray *images = @[@"publish-video", @"publish-picture", @"publish-text", @"publish-audio", @"publish-review", @"publish-offline"];
NSArray *titles = @[@"发视频", @"发图片", @"发段子", @"发声音", @"审帖", @"离线下载"];
// 3.设置中间的按钮 这里是6个 当然也可以是服务器返回的数量 但是计算方法都一样
int maxCols = 3; // 一排最多三个
CGFloat btnW = 72;
CGFloat btnH = btnW + 38;
CGFloat btnStartY = (ScreenH - 2 * btnH) * 0.5;
CGFloat btnStartX = 20;
CGFloat xMargin = (ScreenW - 2 * btnStartX - maxCols * btnW) / (maxCols - 1);
for (int i = 0; i < images.count; i++) { // 循环添加按钮
// 4.初始化按钮
LMHVerticalButton * btn = [[LMHVerticalButton alloc]init];
btn.tag = i;
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
// 5. 设置按钮的内容
btn.titleLabel.font = [UIFont systemFontOfSize:14];
[btn setTitle:titles[i] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:images[i]] forState:UIControlStateNormal];
// 6.计算当前按钮的X/Y
int row = i / maxCols; //所在行
int col = i % maxCols; // 所在列
CGFloat btnX = btnStartX + col * (xMargin + btnW);
CGFloat btnEndY = btnStartY + row * btnH;
CGFloat btnBeginY =ScreenH + btnEndY;
// 7.给按钮添加弹簧动画
POPSpringAnimation * anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
anim.fromValue = [NSValue valueWithCGRect:CGRectMake(btnX, btnBeginY, btnW, btnH)];
anim.toValue = [NSValue valueWithCGRect:CGRectMake(btnX, btnEndY, btnW, btnH)];
anim.springBounciness = 10; //springBounciness为弹簧弹力 取值范围为【0，20】， 默认为4
anim.springSpeed = 10; //springSpeed为弹簧速度 速度越快 动画时间越短 取值范围[0,20], 默认为12 和springBounciness一起决定弹簧动画效果
anim.beginTime = CACurrentMediaTime() + animationDelay * i; // 开始时间添加延迟
[btn pop_addAnimation:anim forKey:nil];
[anim setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
// 动画执行完毕 恢复点击事件
self.view.userInteractionEnabled = YES;
}];
}
四、实现退出动画
退出的动画都是一样的，从小到上，从右到左掉下去。为了实现用户点击其他地方退出界面先退出动画再执行事件的效果，给退出动画加一个block回调事件,监听最后一个按钮的动画执行完毕后执行block中的代码
/**
* 先执行退出动画 动画执行完毕再执行completionBlock - 微博
*/
- (void)cancelWithCompletionBlock:(void(^)())completionBlock{
// 让控制器的view不能点击
self.view.userInteractionEnabled = NO;
int index = 0; // 索引 用来设置按钮动画的延迟时间
for ( int i = (int)self.view.subviews.count - 1; i > 0; i--) {
UIView * subview = self.view.subviews[i];
// 基本动画
POPBasicAnimation * anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewCenter];
CGFloat centerY = subview.centerY + ScreenH;
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(subview.centerX, centerY)];
anim.beginTime = CACurrentMediaTime() + index * animationDelay;
index ++;
[subview pop_addAnimation:anim forKey:nil];
// 监听最后一个动画
if (i == 1) {
[anim setCompletionBlock:^(POPAnimation *anim, BOOL finished){
[self dismissViewControllerAnimated:NO completion:nil];
!completionBlock ? : completionBlock();
}];
}
}
}
在需要调用退出该界面的地方调用该方法即可
/**
* 按钮点击事件
*/
- (void)btnClick:(UIButton *)button{
[self cancelWithCompletionBlock:^{
switch (button.tag) {
case 0:
NSLog(@"发视屏");
break;
case 1:
NSLog(@"发图片");
break;
case 2:
NSLog(@"发段子");
break;
case 3:
NSLog(@"发声音");
break;
case 4:
NSLog(@"发连接");
break;
case 5:
NSLog(@"音乐相册");
break;
default:
break;
}
}];
}
/**
* 取消按钮的点击事件
*/
- (IBAction)btnCancelClcik:(id)sender {
[self cancelWithCompletionBlock:nil];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self cancelWithCompletionBlock:nil];
}
demo地址：制作类似于微博、百思发布界面的特效动画
