转载

【iOS】制作类似于微博、百思发布界面的特效动画

一言不合先上效果图

仿百思不得姐发布界面动画

【iOS】制作类似于微博、百思发布界面的特效动画

仿微博发布界面动画

实现思路分析

在微博、简书、百思这些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 *)touches withEvent:(UIEvent *)event{
    [self cancelWithCompletionBlock:nil];
}

demo地址：制作类似于微博、百思发布界面的特效动画

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

正文到此结束