iOS动画案例(2) 仿网易新闻标题动画

  由于产品的需要，做了一个和网易新闻标题类似的动画效果，现在新闻类的APP都是采用这样的动画效果，来显示更多的内容。先看一下动画效果：



  由于这个动画效果在很多场合都有应用，所以我专门封装了一个控件"FHSegmentControl"，它继承于UIView，同学们只要简单的调用就可以了，非常简单。

1.把“FHSegmentControl”文件夹拖入到你的工程中。

2.这样的动画效果都是和流水布局在一起应用的，所以需要设置子视图控制器,由于这次的重点不在这里，所以我的子视图控制器很简单，只有一个UIWebview;

#import <UIKit/UIKit.h>

@interface FHChildViewController : UIViewController

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

3.添加SegmentControl、流水布局

#import "ViewController.h"
#import "FHSegmentControl.h"
#import "FHChildViewController.h"

#define ScreenWidth  [UIScreen mainScreen].bounds.size.width
#define ScreenHeight  [UIScreen mainScreen].bounds.size.height

@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>

@property (nonatomic, strong)FHSegmentControl *segment;
@property (nonatomic, strong) UICollectionView *collectionView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 添加Segment
    [self setupSegmentControl];
    // 添加流水布局
    [self setupBottomeView];
    // 添加子视图
    [self addChildVC];
}
// 添加Segment
- (void)setupSegmentControl {

    // 自定义导航
    UIView *navView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, 64)];
    navView.backgroundColor =  [UIColor colorWithRed:95/255.0 green:171/255.0 blue:128/255.0 alpha:1.0f];
    [self.view addSubview:navView];

    // 添加_segment
    _segment = [[FHSegmentControl alloc] initWithFrame:CGRectMake(0, 20, ScreenWidth, 44)];
    // 设置标题 不需要设置标题长度，会根据标题字数自动生成，标题字号17
    _segment.titles = @[@"百度",@"搜狐",@"新浪",@"雅虎",@"网易",@"腾讯",@"凤凰网",@"百度",@"百度",@"百度"];
    // 标题颜色
    _segment.titleColor = [UIColor redColor];
    // 选中标题颜色
    _segment.selectedTitleColor = [UIColor blackColor];
    __weak typeof(self) weakSelf = self;
    // 回调  index 就是你点击的那个标题所在数组中的索引
    _segment.SegmentControlDidSelectedIndexBlock = ^(NSInteger index) {
        // 与流水布局联动
        CGFloat offsetX = index * ScreenWidth;
        weakSelf.collectionView.contentOffset = CGPointMake(offsetX, 0);
    };
    [navView addSubview:_segment];
}

// 添加流水布局
- (void)setupBottomeView {

    self.automaticallyAdjustsScrollViewInsets = NO;
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.itemSize = CGSizeMake(ScreenWidth, ScreenHeight - 64);
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    flowLayout.minimumInteritemSpacing = 0.0f;
    flowLayout.minimumLineSpacing = 0.0f;

    _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, ScreenWidth, ScreenHeight - 64) collectionViewLayout:flowLayout];
    _collectionView.backgroundColor = [UIColor whiteColor];
    _collectionView.pagingEnabled = YES;
    _collectionView.showsHorizontalScrollIndicator = YES;
    _collectionView.bounces= NO;
    _collectionView.dataSource = self;
    _collectionView.delegate = self;
    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"ID"];
    [self.view addSubview:_collectionView];
}
#pragma mark - UICollectionViewDelegate
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    NSInteger index = scrollView.contentOffset.x / ScreenWidth;
    // 与标题联动
    [_segment setSelectedIndex:index];

}
#pragma mark - UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return self.childViewControllers.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ID" forIndexPath:indexPath];
    [cell.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    FHChildViewController *childVC = self.childViewControllers[indexPath.row];
    childVC.view.frame = cell.contentView.bounds;
    [cell.contentView addSubview:childVC.view];

    return cell;
}

// 添加子视图
- (void)addChildVC {

    NSArray *urlArr = @[@"http://www.baidu.com",@"http://www.sohu.com",@"http://www.sina.com.cn",@"http://www.yahoo.com",@"http://www.163.com",@"http://www.qq.com",@"http://www.ifeng.com",@"http://www.baidu.com",@"http://www.baidu.com",@"http://www.baidu.com"];
    for (int i = 0; i < urlArr.count; i++) {

        FHChildViewController *childVC = [FHChildViewController new];
        childVC.view.backgroundColor = [UIColor whiteColor];
        NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:urlArr[i]]];
        [childVC.webView loadRequest:request];
        [self addChildViewController:childVC];
    }
}

@end

  我封装的这个控件会上传到GitHub,欢迎大家应用，如果有错误，联系我，一定会第一时间更改。