【iOS】六种动画效果的实现
做过一个项目，里面涉及到的动画效果比较多，在这里做个小小的总结。
直线动画效果
实现一个物体在某段时间从一个点移动到另一个点。
效果如下：
动画相关代码如下：
动画模型：
@interface AnimationModel : NSObject
@property(nonatomic,strong) NSArray * images;
@property(nonatomic,assign) float fromX;
@property(nonatomic,assign) float fromY;
@property(nonatomic,assign) float toX;
@property(nonatomic,assign) float toY;
@property(nonatomic,assign) BOOL loop;
@property(nonatomic,assign) float time;
@end动画实现：
-(void)addSingleLineAnimationToView:(UIView *)view animationModel:(AnimationModel *)model{
CABasicAnimation* moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
moveAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(model.fromX,model.fromY)];
moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(model.toX,model.toY)];
moveAnimation.duration = model.time;
moveAnimation.removedOnCompletion = NO;
moveAnimation.repeatCount = MAXFLOAT;
if (model.loop == 0) {
moveAnimation.repeatCount = 1;
}
[view.layer addAnimation:moveAnimation forKey:@"singleLineAnimation"];
}爆炸点赞动画效果
效果有点像撒花，效果如下：
这个效果的实现也是我在网上找到的，封装了一个View和一个button，调用很方便，下面我贴一下调用的代码，后面会给出完整代码的地址。
调用代码：
-(BZFireworkAnimationButton *)praiseButton{
if (!_praiseButton) {
_praiseButton = [[BZFireworkAnimationButton alloc] initWithFrame:CGRectMake(150, 200, 50, 50)];
_praiseButton.particleImage = [UIImage imageNamed:@"button_bulletin_board_collected"];
_praiseButton.particleScale = 0.05f;
_praiseButton.particleScaleRange = 0.02f;
[_praiseButton addTarget:self action:@selector(praiseAction:) forControlEvents:UIControlEventTouchUpInside];
[_praiseButton setImage:[UIImage imageNamed:@"button_bulletin_board_uncollect"] forState:UIControlStateNormal];
[_praiseButton setImage:[UIImage imageNamed:@"button_bulletin_board_collected"] forState:UIControlStateSelected];
}
return _praiseButton;
}
-(void)praiseAction:(BZFireworkAnimationButton *)button{
if (button.selected) {
[button popInsideWithDuration:0.4f];
}else{
[button popOutsideWithDuration:0.4];
[button animate];
}
button.selected = !button.selected;
}心跳（放大缩小）动画效果
效果如下：
实现代码：
-(void)setupHeartbeatAnimationInView:(UIView *)view{
// 设定为缩放
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// 动画选项设定
animation.duration = 1.2; // 动画持续时间
animation.repeatCount = 10000000000; // 重复次数
animation.autoreverses = YES; // 动画结束时执行逆动画
// 缩放倍数
animation.fromValue = [NSNumber numberWithFloat:1.0]; // 开始时的倍率
animation.toValue = [NSNumber numberWithFloat:1.4]; // 结束时的倍率
animation.removedOnCompletion = NO;
// 添加动画
[view .layer addAnimation:animation forKey:@"scale-layer"];
}上下浮动效果
效果如下：
代码实现如下：
@interface FloatViewController ()
//判断是否是当前ViewController，如果不是，则停止动画，否则动画一直在,且dealloc方法不会被调用
@property(nonatomic,assign) BOOL isCurrentVC;
@end
@implementation FloatViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor orangeColor];
UIImageView * animationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(30, 105, 144, 350)];
animationImageView.image = [UIImage imageNamed:@"image_city_angel_login_girl"];
[self setAnimationImageViewAnimation:animationImageView];
[self.view addSubview:animationImageView];
}
-(void)dealloc{
NSLog(@"FloatViewController dealloc");
}
-(void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
self.isCurrentVC = YES;
}
-(void)viewWillDisappear:(BOOL)animated{
[super viewWillDisappear:animated];
self.isCurrentVC = NO;
}
-(void)setAnimationImageViewAnimation:(UIImageView *)animationImageView{
[UIView animateWithDuration:1 animations:^{
animationImageView.frame = CGRectMake(30, 90, 144, 350);
}];
[UIView animateWithDuration:1 delay:1 options:UIViewAnimationOptionCurveEaseInOut animations:^{
animationImageView.frame = CGRectMake(30, 105, 144,350);
} completion:^(BOOL finished) {
if (self.isCurrentVC) {
[self setAnimationImageViewAnimation:animationImageView];
}
}];
}这个动画效果有一点需要注意的就是需要手动停止，最好离开该页面的时候就手动让它停止，否则会造成内存泄漏。如果是push到下级页面，手动停止了动画，回到该页面时还需要动画启动的话，可以给动画的view一个tag值，然后在viewWillAppear中调用一下setAnimationImageViewAnimation方法。
图片序列gif效果
开发中经常遇到动图的效果，如果美术给的是gif图，那么可以使用SDWebImage中的方法进行播放，如果给的是图片序列，我们可以用UIImageView自带的属性来实现。
效果如下：
使用UIImageView自带属性实现代码如下：
NSArray * images = @[@"gif_ferriswheel1",@"gif_ferriswheel2",@"gif_ferriswheel3",@"gif_ferriswheel4",@"gif_ferriswheel5",@"gif_ferriswheel6"];
UIImageView * imageViews = [[UIImageView alloc] init];
UIImage * image = [UIImage imageNamed:images[0]];
imageViews.frame = CGRectMake(120, 200, image.size.width, image.size.height);
NSMutableArray * imagesArray = [NSMutableArray array];
for (NSString * imagesName in images) {
UIImage * tempImage = [UIImage imageNamed:imagesName];
[imagesArray addObject:tempImage];
}
imageViews.animationImages = [imagesArray copy];
imageViews.animationDuration = 0.9;
imageViews.animationRepeatCount = 1000000000;
[imageViews startAnimating];
[self.view addSubview:imageViews];这种方式需要注意的是animationImages这个数组里面的对象是UIImage，所以千万不要把图片名称的数组直接赋值，会造成崩溃。
直线+Gif效果
图片既有位移的改变，又在改变位移的同时自身在变，比如一个人走路。
效果如图：
实现动画主要代码如下：
-(void)initData{
NSString * jsonPath = [[NSBundle mainBundle] pathForResource:@"animation" ofType:@"json"];
NSData * data = [NSData dataWithContentsOfFile:jsonPath];
NSDictionary * dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
NSArray * lineGifArray = dic[@"walk_animation"];
self.lineGifArray = [NSMutableArray array];
for (NSDictionary * item in lineGifArray) {
AnimationModel * model = [[AnimationModel alloc] init];
[model setValuesForKeysWithDictionary:item];
[self.lineGifArray addObject:model];
}
}
-(void)setupLineGifAnimation{
for (AnimationModel * model in self.lineGifArray) {
UIImageView * animationImageView = [[UIImageView alloc] init];
animationImageView.image = [UIImage imageNamed:model.images[0]];
animationImageView.frame = CGRectMake(model.toX, model.toY, animationImageView.image.size.width, animationImageView.image.size.height);
NSMutableArray * imagesArray = [NSMutableArray array];
for (NSString * imagesName in model.images) {
UIImage * tempImage = [UIImage imageNamed:imagesName];
[imagesArray addObject:tempImage];
}
animationImageView.animationImages = [imagesArray copy];
animationImageView.animationDuration = 1.2;
animationImageView.animationRepeatCount = 1000000000;
[animationImageView startAnimating];
[self.view addSubview:animationImageView];
[self addSingleLineAnimationToView:animationImageView animationModel:model];
}
}
-(void)addSingleLineAnimationToView:(UIView *)view animationModel:(AnimationModel *)model{
CABasicAnimation* moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
moveAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(model.fromX,model.fromY)];
moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(model.toX,model.toY)];
moveAnimation.duration = model.time;
moveAnimation.removedOnCompletion = NO;
moveAnimation.repeatCount = MAXFLOAT;
if (model.loop == 0) {
moveAnimation.repeatCount = 1;
}
[view.layer addAnimation:moveAnimation forKey:@"lineGifAnimation"];
}这个动画效果涉及到两个时间，一个位移从起点到终点的时间和一个完成一套动作的时间，这两个时间需要去调才能做出最自然的效果，我这里提供的是思路，两个时间没有花时间去调，请见谅~
动画能让我们的app显得更有生机和活力，也还有很多其他的动画效果，记住的话更好，记不住可以抽时间整理一下，下次再写的时候找起来方便。
这六个动画效果我自己写了一个完整的demo，点击这里获取代码。
