首页 > 代码库 > 帧动画与定时器动画的火焰效果

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

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

 1 #import "FireViewController.h" 2  3 @implementation FireViewController 4  5 - (void)viewDidLoad 6 { 7     [super viewDidLoad]; 8      9     _fireImageView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];10     [self.view addSubview:_fireImageView];11     _imageNameArray = [[NSMutableArray alloc] init];  //使用可变数组12     for (int i = 1; i <= 17; i++)13     {14         NSString * imageName = [NSString stringWithFormat:@"Fire%d.gif", i];15         [_imageNameArray addObject:imageName];16     }17     18     _timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(fireShow) userInfo:nil repeats:YES];   //定时器19     20     UIButton *kaiGuan = [UIButton buttonWithType:UIButtonTypeSystem];21     kaiGuan.frame = CGRectMake(280, 20, 30, 30);22     [kaiGuan setBackgroundImage:[UIImage imageNamed:@"inc_pause.png"] forState:UIControlStateNormal];23     kaiGuan.tag = 99;24     [kaiGuan addTarget:self action:@selector(isContinue) forControlEvents:UIControlEventTouchUpInside];25     [self.view addSubview:kaiGuan];26 }27 28 - (void)fireShow29 {30     static int count = 0;31     32     _fireImageView.image = [UIImage imageNamed:[_imageNameArray objectAtIndex:count]];33     count ++;34     35     if (count >= _imageNameArray.count)36     {37         count = 0;38     }39 }40 41 - (void)isContinue42 {43     UIButton * btn = (UIButton *)[self.view viewWithTag:99];44     if ( _timer != nil )  //[_timer isValid] 判断定时器是都还有效45     {46         [_timer invalidate];  //销毁动画47         [btn setBackgroundImage:[UIImage imageNamed:@"inc_start.png"] forState:UIControlStateNormal];   //更换按钮的显示图片48         _timer = nil;49         50     }51     else52     {53         _timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(fireShow) userInfo:nil repeats:YES];  //重新生成一个定时器54         [btn setBackgroundImage:[UIImage imageNamed:@"inc_pause.png"] forState:UIControlStateNormal];55     }56 }57 58 @end
View Code

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

 1 #import "HUAppDelegate.h" 2  3 @implementation HUAppDelegate 4  5 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 6 { 7     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; 8     // Override point for customization after application launch. 9     self.window.backgroundColor = [UIColor whiteColor];10     [self.window makeKeyAndVisible];11     12     //创建可变数组,存放图片13     NSMutableArray *imageArray = [[NSMutableArray alloc] init];14     for (int i=1; i < 18; i ++ )15     {16         [imageArray addObject:[UIImage imageNamed:[NSString stringWithFormat:@"Fire%d.gif", i]]];17     }18     19     UIImageView *imageView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];20 //    imageView.image = [UIImage imageNamed:@"Fire1.gif"];  //这句不可少,否则点击按钮让动画暂停的时候,出现白屏,因为此时没有图片被加载21     imageView.tag = 22; //设置 tag 的原因是避免设置全局变量22     23     //帧动画24     imageView.animationImages = imageArray;   //数组里存储的必须是 UIImage 的对象,即图片25     [imageView setAnimationDuration:2];   //用来这只动画持续的时间26     [imageView setAnimationRepeatCount:0];  //0 表示无限多次,与 UIView 里的setAnimationRepeatCount:(float)repeatCount 0(默认为不重复) 不同27     [imageView startAnimating];  //动画开始28     [self.window addSubview:imageView];29 30     //使用全屏的按钮,可以实现点击屏幕让火焰停止与继续31     UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];32     btn.frame = [UIScreen mainScreen].bounds;33     [self.window addSubview:btn];34     [btn addTarget:self action:@selector(pauseOrContinue) forControlEvents:UIControlEventTouchUpInside];35     36     return YES;37 }38 39 - (void)pauseOrContinue40 {41     UIImageView *imageView = (UIImageView *)[self.window viewWithTag:22];42 //    if ([imageView isAnimating])43 //    {44 //        [imageView stopAnimating];45 //    }46 //    47 //    else48 //    {49 //        [imageView startAnimating];50 //    }51     52     //还可以用另外一种方法来控制动画是否暂停与继续53     static int count = 0;54     count ++;55     if (count % 2 == 1)56     {57         [imageView stopAnimating];58     }59     else60     {61         [imageView startAnimating];62     }//这种方法更为通用一点,因为不是所有的控件都有判断其是否继续的 属性63 }64 65 @end
View Code

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

        

区别在于点击按钮时:

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

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

 

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