iOS开发学习之简单动画

浏览数：127 / 时间：2015年06月11日

UIActivityIndicatorView
UIImageView的序列帧动画
UIView动画
时钟动画

一、UIActivityIndicatorView

1??属性

－isAnimating属性判断是否正在动画

2??第三方库SVProgressHUD

[SVProgressHUD dismiss]

[SVProgressHUD showWithStatus:@“网络加载中” maskType:SVProgressHUDMashTypeGradient]；(后面的参数是否遮挡，可以不用)

3??NSTimer

[NSTimer scheduledTimerWithTimeInterval:1 target:2 selector:3 userInfo:4 repeats:5];

1.时间间隔 2.self 3.触发时调用的方法 4.用户信息 5.是否重复

[timer invalidate];

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 使用了SVProgress的maskType属性，当前视图无法接受触摸事件
    // 需要想办法关闭
    // 使用NSTimer
    if ([_indicatorView isAnimating]) {
        [SVProgressHUD dismiss];
        [_indicatorView stopAnimating];
    } else {
        [SVProgressHUD showWithStatus:@"等会~~~" maskType:SVProgressHUDMaskTypeGradient];
        
        // 指示器一启动，就无法交互了，要把时钟放在这里
        [_indicatorView startAnimating];
        
        [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(updateTimer:) userInfo:nil repeats:NO];
    }
}

// NSTimer调用方法的参数，只能是NSTimer，使用参数，在当前示例中，就不需要使用成员变量了
- (void)updateTimer:(NSTimer *)timer
{
    [SVProgressHUD dismiss];
    [_indicatorView stopAnimating];
    
    // 关闭时钟
    [timer invalidate];
}

二、UIImageView的序列帧动画

1??属性说明

－animationImages：要显示的一组图盘

－animationDuration：显示所有图片需要的时间(如果中间由修改速度，需要先停止、设置、开始)

－animationRepeatCount：动画的执行次数

2??相关方法

－-(void)startAnimating;

－-(void)stopAnimating

－-(void)isAnimating;

1.赵云动画

// 创建赵云的序列帧动画
- (void)createZhaoyunImage
{
    // Do any additional setup after loading the view, typically from a nib.
    // 设置ImageView的序列帧动画
    // 1. 需要一个数组
    NSMutableArray *images = [NSMutableArray array];
    for (int i = 1; i < 11; i++) {
        NSString *fileName = [NSString stringWithFormat:@"/images/zy/%d.png", i];
        UIImage *image = [UIImage imageNamed:fileName];
        [images addObject:image];
    }
    
    [_zhaoyunImage setImage:images[0]];
    // 设置图像数组
    [_zhaoyunImage setAnimationImages:images];
    // 设置10张图片播放的时长
    [_zhaoyunImage setAnimationDuration:1.0f];
    // 开始动画
    [_zhaoyunImage startAnimating];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    if ([_zhaoyunImage isAnimating]) {
        // 序列帧动画每次停止的时候，都会显示设置的图像，而不是当前播放到的图像
        [_zhaoyunImage stopAnimating];
    } else {
        [_zhaoyunImage startAnimating];
    }
}

2.燕子动画

#pragma mark - 拖拽燕子
- (void)dragBird:(UIPanGestureRecognizer *)sender
{
    // 先需要知道手指的位置
    CGPoint location = [sender locationInView:self.view];
    
    // 手势状态改是UIGestureRecognizerStateChanged的时候，手指还没有离开屏幕
    // 这个时候，可以修改鸟的位置，同时让鸟扑腾
    if (sender.state == UIGestureRecognizerStateChanged) {
        // 注意：如果要修改播放中的序列帧动画
        // 1. 需要先停止动画
        [_birdImage stopAnimating];
        // 2. 修改动画频率
        [_birdImage setAnimationDuration:0.2f];
        // 3. 重新启动动画
        [_birdImage startAnimating];
        
        // 修改燕子的动画频率
        // 设置燕子的位置
        [_birdImage setCenter:location];
    } else if (sender.state == UIGestureRecognizerStateEnded) {
        // 恢复燕子慢悠悠
        // 1. 需要先停止动画
        [_birdImage stopAnimating];
        // 2. 修改动画频率
        [_birdImage setAnimationDuration:1.2f];
        // 3. 重新启动动画
        [_birdImage startAnimating];

    }
}

// 设置燕子的序列帧动画，并设置燕子的拖拽手势监听
- (void)createBirdImage
{
    // 设置燕子的序列帧动画
    NSArray *images = @[[UIImage imageNamed:@"/images/素材/燕子1.png"],
                        [UIImage imageNamed:@"/images/素材/燕子2.png"]];
    [_birdImage setAnimationImages:images];
    [_birdImage setAnimationDuration:1.2f];
    [_birdImage startAnimating];
    
    // 定义手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(dragBird:)];
    [_birdImage addGestureRecognizer:pan];
    
    // 设置燕子图片允许用户交互
    [_birdImage setUserInteractionEnabled:YES];
}

三、UIView动画

四、时钟动画（CADisplayLink）

－是一种以屏幕刷新屏幕触发的时钟机制，每秒钟执行大约60次

－倒入QuartzCore框架

1??使用方法

－定义CADisplayLink并制定触发调用方法

－将显示链接添加到主运行循环队列

2??两种判断时间间隔的方法

－以成员变量的方式判断

－以全局变量的方式判断

@interface ViewController ()
{
    // 游戏时钟
    CADisplayLink *_gameTimer;
    
    // 时钟触发的初始时间
    CFTimeInterval _startTime;
}
@end
@implementation ViewController

#pragma mark - 使用指定时间处理CADisplayLink触发时间的方法（1）
- (void)updateTimer:(CADisplayLink *)sender
{
    // 如果_startTime=0，说明是第一次触发时钟，需要记录时钟的时钟戳记
    if (_startTime == 0) {
        _startTime = sender.timestamp;
    }
    
    // 时钟触发的时间差值
    CFTimeInterval deltaTime = sender.timestamp - _startTime;
    
    if (deltaTime > 1.0) {
        NSLog(@"时钟触发了 %f", sender.timestamp);
        
        // 更新_startTime的数值，记录本次执行任务的时间
        _startTime = sender.timestamp;
    }
}

#pragma mark - 使用指定时间处理CADisplayLink触发时间的方法（2）
- (void)step
{
    // 假定每隔一秒触发一次方法
    if (steps % (10 * 60 * 60) == 1) {
        NSLog(@"时钟触发了！ %ld", steps);
    }
    
    steps++;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 首先将启动的时间点设置为0
    _startTime = 0.0f;
    
    // 将屏幕刷新总次数设置为0
    steps = 0;
    
    // 初始化游戏时钟
    _gameTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(step)];
    // 初始化时钟之后，有一个必须要做的，就是把游戏时钟，添加到主运行循环
    [_gameTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}

3??使用步骤

方法1:

－初始化一个游戏时钟，并且加入主队列中

－自己制定时间间隔，去执行操作

1.需要一个成员变量，记录时钟起始的“时间点”：CFTimeInterval _startTime;

2.计算成员变量去与时钟触发时的时间差，如果大于制定的时间差，再去执行操作

方法2:

－定义一个全局的每秒中执行的次数

－如果执行了这个次数，就执行要执行的操作

steps = 0;
    // 初始化雪花图像
    _snowImage = [UIImage imageNamed:@"/images/素材/雪花"];
    
    // 初始化时钟
    _gameTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(step)];
    [_gameTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

#pragma mark - 时钟处理方法
- (void)step
{
    // 假设每秒钟绘制6个雪花
    if (steps % 10 == 0) {
        // 绘制雪花
        UIImageView *imageView = [[UIImageView alloc]initWithImage:_snowImage];
        
        // 指定雪花出现的位置
        CGPoint startPoint = CGPointMake(arc4random() % 320, -30.0);
        // 指定雪花结束的位置
        CGPoint endPoint = CGPointMake(arc4random() % 320, 490);
        /**
         新问题
         1. 雪花太大
         2. 雪花太亮，需要改一下透明度
         3. 如果雪花会转就更好了
         */
        CGFloat r = arc4random() % 5 + 10;
        [imageView setFrame:CGRectMake(0, 0, r, r)];
        
        // 设置起始点
        [imageView setCenter:startPoint];
        
        // 把雪花图像添加到视图
        [self.view addSubview:imageView];
        
        [UIView animateWithDuration:6.0f delay:0.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
            [imageView setCenter:endPoint];
            [imageView setAlpha:0.2f];
            [imageView setTransform:CGAffineTransformMakeRotation(M_PI)];
        } completion:^(BOOL finished) {
            // 从父视图删除，这个千万不要忘了
            [imageView removeFromSuperview];
        }];
    }
    
}