本篇文章记录的是学习帧动画的笔记
目录
1 帧动画
所谓帧动画就是将一个序列的一组图片按顺序在一定时间内播放所展示出来的视觉效果。
2 动画资源准备
2.1 Assets.xcassets目录中添加图片资源
首先我们需要准备图片，在工程创建后xcode会默认生成Assets.xcassets文件夹，然后将一组动画图片添加到其中，最直接各方式拖拽进来，或者把一组动画的文件夹，比如run文件夹在电脑目录下先加入到Assets.xcassets目录，然后Add Files to“UIDemo”进来。操作如下图
2.2 Main.storyboard布局
布局效果如下图
布局通过故事板来实现，UIImageView用来展示动画图片，下面的7各UIButton用来触发点击事件，具体布局方式很简单，就不记录了，直接拖拽就行。
2.3 UIButton添加点击事件
给UIButton添加点击事件有两种方式
1）按住control键，按住左边按钮往右边代码中拖拽，弹出一个对话框，Name：输出函数名standAction，会自动生成代码
如何判断是否函数和视图关联起来了呢看函数前面的圆圈，如果是1的状态就是没有关联，下面的实心圆说明和视图绑定了
2）第二种方法是先代码写一个函数让后按住control键，点按按钮拖拽关联如下
看是否按钮和代码的调用行数绑定了，除了看圆圈外，最稳妥的是按住control键，右键点击会弹出一个下面对话框
2.4 点击事件
通过上面的方式给button绑定事件之后就可以在这个函数里面写代码了，当然也还有其他的方式，特别是代码布局的时候，给按钮添加点击事件就不是这种方式了。
整个代码如下
#import "ViewController.h"
#import <AVFoundation/AVFoundation.h>
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UIButton *standButton;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.imageView.clipsToBounds = true;
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
self.imageView.image = [UIImage imageNamed:@"dazhao_1"];
}
- (IBAction)standAction:(id)sender {
[self play:@"stand" count:11];
// [self performSelector:@selector(bigAction) withObject:nil afterDelay:1];
}
- (IBAction)bigAction:(id)sender {
[self play:@"dazhao" count:88];
}
- (IBAction)smallAction:(id)sender {
[self play:@"xiaozhao1" count:22];
}
- (IBAction)smallAction2:(id)sender {
[self play:@"xiaozhao2" count:36];
}
- (IBAction)smallAction3:(id)sender {
[self play:@"xiaozhao3" count:40];
}
- (IBAction)runAction:(id)sender {
[self play:@"run" count:7];
}
- (IBAction)deadAction:(id)sender {
[self play:@"dead" count:24];
}
-(void) play:(NSString *)action count:(int) count{
NSMutableArray *imagesArray = [NSMutableArray array];
for(int i = 1; i < count; i++) {
NSString *imageName = [NSString stringWithFormat:@"%@_%d",action, i];
UIImage *image = [UIImage imageNamed:imageName];
[imagesArray addObject:image];
}
self.imageView.animationImages = imagesArray;
self.imageView.animationRepeatCount = [action isEqualToString:@"stand"] ? 0 : 1;
self.imageView.animationDuration = count * 0.1;
if(![self.imageView isAnimating]) {
[self.imageView startAnimating];
} else {
[self.imageView stopAnimating];
}
self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@_%d",action, count - 1]];
}
@end
2.5 动画资源
动画资源我打了个zip包，可以去我的资源下载里面下载，资源名称：帧动画图片资源，本来是免费下载的，但是不知道怎么搞，系统默认5C币，现在正在审核中，看能不能修改。
2.6 动画播放代码讲解
核心的动画播放代码是下面的play函数中的代码，这是一段通用代码，因为不只是为了播放某一个种类的动画，
-(void) play:(NSString *)action count:(int) count{
NSMutableArray *imagesArray = [NSMutableArray array];
for(int i = 1; i < count; i++) {
NSString *imageName = [NSString stringWithFormat:@"%@_%d",action, i];
UIImage *image = [UIImage imageNamed:imageName];
[imagesArray addObject:image];
}
self.imageView.animationImages = imagesArray;
self.imageView.animationRepeatCount = [action isEqualToString:@"stand"] ? 0 : 1;
self.imageView.animationDuration = count * 0.1;
if(![self.imageView isAnimating]) {
[self.imageView startAnimating];
} else {
[self.imageView stopAnimating];
}
self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@_%d",action, count - 1]];
}1、for循环是先将图片资源的名字保存进imagesArray待用
2、NSString *imageName = [NSString stringWithFormat:@"%@_%d",action, i];
%@和%d是占位符，%@会被action替代，%d会被i替代
3、self.imageView.animationImages = imagesArray;是将准备好的图片资源负值给imageView的animationImages
4、self.imageView.animationRepeatCount设置动画重复次数
5、self.imageView.animationDuration设置动画的间隔时间，随着图片的数量增长count*0.1
6、self.imageView startAnimating开始动画
7、self.imageView stopAnimating停止动画