IOS开发UI篇------下拉刷新动画

大家在用软件时经常会要刷新某个界面,或者是加载更多的数据,随着用户体验的提升在下拉刷新或者上拉加载时都会显示一个动画效果例如:

1.gif

下面就以下拉刷新为例实现一下这个效果,上拉加载的实现原理和这个一样,只不过是在尺寸计算上稍有不同.
1.首先看到这个功能首先思考的是用UITableView去实现这个界面,然后再细致完成功能,我的做法是用UIViewController控制器去做,然后在ViewController中添加tableView,而不是直接创建表视图控制器.

#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource,UIScrollViewDelegate>
{
    UITableView *Tabelview;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor colorWithRed:88/255.0 green:156/255.0 blue:186/255.0 alpha:1.0];

    Tabelview = [[UITableView alloc]initWithFrame:CGRectMake(0, 0,self.view.frame.size.width ,self.view.frame.size.height)];
    Tabelview.backgroundColor = [UIColor clearColor];
    Tabelview.delegate = self;
    Tabelview.dataSource = self;
    
    [self.view addSubview:Tabelview];
}
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 2; 
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{   
    return 10;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell  * cell = [Tabelview dequeueReusableCellWithIdentifier:@"Cell"];
    
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
        cell.textLabel.text = [NSString stringWithFormat:@"第%ld分区，%ld行",indexPath.section,indexPath.row];

    }
    return cell;
}
@end

注:这里面cell我没有给内容,只是简单的注册和使用,使之有一个效果的展示

2.把一组完整的图片添加到ViewController上面,设置动画图片的组数,执行完整图片所需要的时间,以及动画重复次数.

    gifImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width ,130)];
    NSArray *gifArray = [NSArray arrayWithObjects:
                         [UIImage imageNamed:@"bicycleOne"],
                         [UIImage imageNamed:@"bicycleTwo"],
                         [UIImage imageNamed:@"bicycleThree"],
                         [UIImage imageNamed:@"bicycleFour"],
                         [UIImage imageNamed:@"bicycleFive"],
                         [UIImage imageNamed:@"bicycleSix"],
                         [UIImage imageNamed:@"bicycleSeven"],
                         [UIImage imageNamed:@"bicycleEight"],
                         nil];
    gifImageView.animationImages = gifArray; 
    gifImageView.animationDuration = 0.3;
    gifImageView.animationRepeatCount = 0;  
    
    [self.view addSubview:gifImageView];

3.在tableView下拉滚动时开始让动画开始执行,这时就要调用scrollView的代理方法

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"%f",scrollView.contentOffset.y);
    if (scrollView.contentOffset.y < -50) {
        [gifImageView startAnimating];
    }
    if(scrollView.contentOffset.y == 0){
        [gifImageView stopAnimating];
    }
}

注:这里设置滚动视图的contentOffset属性,使之在tableView滚动时对坐标进行一个对比计算,当y坐标达到预期值是开始触发图片的动画效果

4.效果的展示

2.gif

网盘下载链接: https://pan.baidu.com/s/1dF5oO3R 密码: z8b1

IOS开发UI篇------下拉刷新动画

推荐阅读更多精彩内容