iOS开发 - 动画效果

1、简介

一个优秀的应用少不了多彩的动画效果

iOS提供了多种动画效果的实现，包括一般动画、核心动画等

2、简单动画

头尾式

// 头尾式动画实现动画效果非常简单，秩序要三步
// 头尾式动画只能实现简单的效果，如UIView的移动，颜色渐变等

// 1.开始动画
[UIView beginAnimations:nil context:nil];

// 2.设置动画时间
[UIView setAnimationDuration:3.0];

// 需要实现的动画效果

// 3.提交动画
[UIView commitAnimations];

Block式

// Block式动画只需要将需要实现的动画效果代码添加到Block块即可
[UIView animateWithDuration:0.5 animations:^{
	// 需要实现的动画效果
}];

序列帧式

// 序列帧动画也叫电影式动画
// 利用电影的原理实现原理，将图片一张张的播放出来即可
// 序列帧动画只适合少量的图片的情况，大量图片会占用太多内存资源

// 创建存放图片的数组，以四张图片为例
NSMutableArray *imageArray = [NSMutableArray array];
for (int i=1; i<=4; i++)
{
    UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%02d",i]];
    [imageArray addObject:image];
}
    
// 创建显示图片的控件
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, w, h)];
[self.view addSubview:imageView];
    
// 设置图片空间的图片数组
imageView.animationImages = imageArray;
    
// 设置动画的时间，即播放一次所需要的时间
imageView.animationDuration = 5;
    
// 设置动画的重复次数，默认为0，也就是无限循环
imageView.animationRepeatCount = 0;
    
// 开始执行动画
[imageView startAnimating];

// 说明：使用序列帧动画可能需要判断动画执行的状态
// stopAnimating 停止播放
// isAnimating 是否正在播放

3、基础动画

// 基础动画主要是旋转、缩放、平移等动画效果
// iOS提供了CABasicAnimation类供我们使用

// 基础动画常用属性
// keyPath : 动画类型
// duration : 动画时间
// removedOnCompletion : 是否维持动画效果
// fillMode : 动画模式


// 1.translation
// 动画对象
CABasicAnimation *animation = [CABasicAnimation animation];

// 动画类型
animation.keyPath = @"transform.translation";

/**
 *  translation 整体平移
 *
 *  byValue 移动的距离
 *
 *  @param 125 x方向移动的距离
 *  @param 105 y方向移动的距离
 */
animation.byValue = [NSValue valueWithCGPoint:CGPointMake(125, 105)];

// 执行时间
animation.duration = 1;

// 是否保持动画执行后的效果
animation.removedOnCompletion = NO;

// 动画模式
animation.fillMode = kCAFillModeForwards;

// 向执行动画的图层添加动画
[self.imageView.layer addAnimation:animation forKey:nil];


// 2.position
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"position";

/**
 *  position 整体平移
 *
 *  座标为view的中心移动后的座标
 *
 */
// 第一种形式，移动到某位置
// 以最初的位置为起点，移动相同的路径，包括距离和方向
// animation.toValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
// 第二种形式，每次偏移量为
animation.byValue = [NSValue valueWithCGPoint:CGPointMake(10, 10)];

animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.imageView.layer addAnimation:animation forKey:nil];


// 3.rotation
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform.rotation";

/**
 *  rotation 同心旋转
 *
 *  @param M_PI_2 正数是向右旋转
 */
animation.byValue = @(M_PI_2);

animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.imageView.layer addAnimation:animation forKey:nil];


// 4.bounds
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"bounds";

/**
 *  bounds 以view中心为起始点改变大小
 *
 *  @param 0  设置值不起作用
 *  @param 0  设置值不起作用
 *  @param 60 改变之后的宽度
 *  @param 60 改变之后的高度
 */
animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 60, 60)];

animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.imageView.layer addAnimation:animation forKey:nil];


// 5.scale
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform.scale";

/**
 *  scale 以view中心为起始点缩放
 *
 *  @param -0.5 缩小0.5倍
 */
animation.byValue = @-0.5;

animation.duration = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.imageView.layer addAnimation:animation forKey:nil];

4、转场动画

// 转场动画多用于视图的切换，即从一个视图过度到另一个视图，因此也叫做过度动画
// iOS提供CATransition实现转场动画效果

// 转场动画常用属性
// 动画类型 type
// 动画时间 duration
// 动画方向 subtype

// 转场动画
CATransition *animation = [CATransition animation];

// 动画类型
animation.type = @"rippleEffect";

// 动画时间
animation.duration = 1;

// 动画方向
animation.subtype = @"kCATransitionFromLeft";

// 添加动画
[self.imageView.layer addAnimation:animation forKey:nil];

5、关键帧动画

// 关键帧动画可以认为是某一个UIView按照一定的路线的移动

UIImageView *imageView = [[UIImageView alloc] init];
imageView.backgroundColor = [UIColor cyanColor];
imageView.layer.masksToBounds = YES;
imageView.layer.cornerRadius = 15;
imageView.bounds = CGRectMake(0, 0, 30, 30);
imageView.center = CGPointMake(290, 190);
[self.view addSubview:imageView];

// 创建帧动画对象
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation];

// 类型
keyAnimation.keyPath = @"position";

// 路径
// 优先级：path > values
/* keyAnimation.values = @[[NSValue valueWithCGPoint:CGPointMake(290, 190)],
 [NSValue valueWithCGPoint:CGPointMake(160, 60)],
 [NSValue valueWithCGPoint:CGPointMake(30, 190)],
 [NSValue valueWithCGPoint:CGPointMake(160, 320)],
 [NSValue valueWithCGPoint:CGPointMake(290, 190)]]; */

// 时间
keyAnimation.duration = 1;

// 节奏
keyAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

// 创建路径：保存绘图信息
CGMutablePathRef path = CGPathCreateMutable();
// 绘制图形
// ellipse 椭圆形
// 路径对象、NULL即可、椭圆形的外切四边形的frame
CGPathAddEllipseInRect(path, NULL, CGRectMake(30, 60, 260, 260));

// 动画路径
keyAnimation.path = path;
CFRelease(path);

// 保存动画效果
keyAnimation.removedOnCompletion = NO;
keyAnimation.fillMode = kCAFillModeForwards;

// 添加动画
// 将动画添加到imageView所在的图层
[imageView.layer addAnimation:keyAnimation forKey:nil];

6、组动画

// 组动画就是将不同的动画效果同时执行的动画
// iOS提供了CAAnimationGroup实现组动画

// 组动画基本步骤
// 1.创建组动画对象
// 2.创建不同的动画效果
// 3.将不同的动画效果加入到组动画 
// 4.添加动画到图层

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 40, 40)];
imageView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:imageView];

// 动画组
CAAnimationGroup *animationGroup = [CAAnimationGroup  animation];

// 平移
CABasicAnimation *position = [CABasicAnimation animation];
position.keyPath = @"position";
position.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 240)];

// 旋转
CABasicAnimation *rotation = [CABasicAnimation animation];
rotation.keyPath = @"transform.rotation";
rotation.toValue = @(M_PI);

// 缩放
CABasicAnimation *scale = [CABasicAnimation animation];
scale.keyPath = @"transform.scale";
scale.toValue = @(1.5);

// 时间
animationGroup.duration = 1;

// 将动画添加到动画组
animationGroup.animations = @[position, rotation, scale];

// 添加动画组到图层
[imageView.layer addAnimation:animationGroup forKey:nil];