帧动画与定时器动画的火焰效果

首先是使用定时器制作的火焰动画效果

#import "FireViewController.h"

@implementation FireViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    _fireImageView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    [self.view addSubview:_fireImageView];
    _imageNameArray = [[NSMutableArray alloc] init];  //使用可变数组
    for (int i = 1; i <= 17; i++)
    {
        NSString * imageName = [NSString stringWithFormat:@"Fire%d.gif", i];
        [_imageNameArray addObject:imageName];
    }
    
    _timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(fireShow) userInfo:nil repeats:YES];   //定时器
    
    UIButton *kaiGuan = [UIButton buttonWithType:UIButtonTypeSystem];
    kaiGuan.frame = CGRectMake(280, 20, 30, 30);
    [kaiGuan setBackgroundImage:[UIImage imageNamed:@"inc_pause.png"] forState:UIControlStateNormal];
    kaiGuan.tag = 99;
    [kaiGuan addTarget:self action:@selector(isContinue) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:kaiGuan];
}

- (void)fireShow
{
    static int count = 0;
    
    _fireImageView.image = [UIImage imageNamed:[_imageNameArray objectAtIndex:count]];
    count ++;
    
    if (count >= _imageNameArray.count)
    {
        count = 0;
    }
}

- (void)isContinue
{
    UIButton * btn = (UIButton *)[self.view viewWithTag:99];
    if ( _timer != nil )  //[_timer isValid] 判断定时器是都还有效
    {
        [_timer invalidate];  //销毁动画
        [btn setBackgroundImage:[UIImage imageNamed:@"inc_start.png"] forState:UIControlStateNormal];   //更换按钮的显示图片
        _timer = nil;
        
    }
    else
    {
        _timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(fireShow) userInfo:nil repeats:YES];  //重新生成一个定时器
        [btn setBackgroundImage:[UIImage imageNamed:@"inc_pause.png"] forState:UIControlStateNormal];
    }
}

@end

下面这一段是使用帧动画实现的火焰效果图

#import "HUAppDelegate.h"

@implementation HUAppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    
    //创建可变数组，存放图片
    NSMutableArray *imageArray = [[NSMutableArray alloc] init];
    for (int i=1; i < 18; i ++ )
    {
        [imageArray addObject:[UIImage imageNamed:[NSString stringWithFormat:@"Fire%d.gif", i]]];
    }
    
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
//    imageView.image = [UIImage imageNamed:@"Fire1.gif"];  //这句不可少，否则点击按钮让动画暂停的时候，出现白屏，因为此时没有图片被加载
    imageView.tag = 22; //设置 tag 的原因是避免设置全局变量
    
    //帧动画
    imageView.animationImages = imageArray;   //数组里存储的必须是 UIImage 的对象，即图片
    [imageView setAnimationDuration:2];   //用来这只动画持续的时间
    [imageView setAnimationRepeatCount:0];  //0 表示无限多次，与 UIView 里的setAnimationRepeatCount:(float)repeatCount 0（默认为不重复） 不同
    [imageView startAnimating];  //动画开始
    [self.window addSubview:imageView];

    //使用全屏的按钮，可以实现点击屏幕让火焰停止与继续
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
    btn.frame = [UIScreen mainScreen].bounds;
    [self.window addSubview:btn];
    [btn addTarget:self action:@selector(pauseOrContinue) forControlEvents:UIControlEventTouchUpInside];
    
    return YES;
}

- (void)pauseOrContinue
{
    UIImageView *imageView = (UIImageView *)[self.window viewWithTag:22];
//    if ([imageView isAnimating])
//    {
//        [imageView stopAnimating];
//    }
//    
//    else
//    {
//        [imageView startAnimating];
//    }
    
    //还可以用另外一种方法来控制动画是否暂停与继续
    static int count = 0;
    count ++;
    if (count % 2 == 1)
    {
        [imageView stopAnimating];
    }
    else
    {
        [imageView startAnimating];
    }//这种方法更为通用一点，因为不是所有的控件都有判断其是否继续的 属性
}

@end

使用者两种方法制作的火焰动画在视觉效果上并没有什么区别

        

区别在于点击按钮时：

使用定时器 NSTimer  生成的动画，点击按钮时图片停止在当前图片，即每次停止时显示的图片有可能都不一样，因为定时器切片时时根据当前图片的计数器来决定的。

使用帧动画生成的动画，在点击按钮让动画停止时，图片总是会回到第一张图片，所以如果不设置第一张图片的话，每次点击让动画停止会出现白屏。