iOS开发学习之简单动画

原文

  http://www.cnblogs.com/letougaozao/p/3673927.html

• 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];
    }];
  }
  
}