CoreAnimation核心动画:
CAAnimation类是一个抽象类,因此我们不会直接创建CAAnimation类的对象,而是使用其子类对象。其有3个子类,分别为:
- CAPropertyAnimiation属性动画
- CAAnimationGroup动画组
- CATransition转场动画
其中,CAPropertyAnimiation属性动画又包含两个子类,分别为:
- CABasicAnimation基本动画
- CAKeyframeAnimation关键帧动画
在iOS9发布后,CABasicAnimation基本动画又添加了一个子类CASpringAnimation弹簧动画。
#CAMediaTiming协议常用属性
CAAnimation类遵守了CAMediaTiming协议,在该协议中定义了一些常用的与动画播放相关的属性。常用的包括如下几个。
- beginTime:动画开始播放的时间,默认为0,即立即开始播放
@property CFTimeInterval beginTime;
- duration:动画持续的时间,默认为0
@property CFTimeInterval duration;
- speed:动画播放的速度,默认为1,数值越大播放的速度越快,例如,当取值为2时,以两倍速度播放动画
@property float speed;
- repeatCount:动画重复播放的次数
@property float repeatCount;
- repeatDuration:动画重复播放的时间间隔
@property CFTimeInterval repeatDuration;
- fillMode:定义动画播放完毕后的动作,一共有4个可选动作,默认为:kCAFillModeRemoved,即恢复原样
@property(copy) NSString *fillMode;
CA_EXTERN NSString * const kCAFillModeForwards;
CA_EXTERN NSString * const kCAFillModeBackwards;
CA_EXTERN NSString * const kCAFillModeBoth;
CA_EXTERN NSString * const kCAFillModeRemoved;
#CAAnimation类的代理协议CAAnimationDelegate
CAAnimationDelegate是CAAnimation类的代理协议,其中定义了与动画播放相关的一些方法,主要包括:
- 动画开始播放时调用的方法
- (void)animationDidStart:(CAAnimation *)anim;
- 动画停止播放时调用的方法,停止播放的原因有可能是动画播放完成,也有可能是人为控制动画停止播放
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
介绍一下相对比较常见的两种动画CABasicAnimation(基本动画)和CATransition转场动画(转场动画),以备后用
#CABasicAnimation基本动画
CABasicAnimation类是使用最简单的核心动画类,我们只需要指定keyPath,然后设置起始值(fromValue)和目标值(toValue),然后再把该动画对象添加到一个CALayer类的对象上,即可实现动画的播放。
- keyPath的初始值,默认情况下为空。当不设置fromValue的值时,动画播放的初始值取自layer对象的keyPath指定属性的当前值
@property(nullable, strong) id fromValue;
- keyPath的目标值,即变动后的值
@property(nullable, strong) id toValue;
- 乘数。当fromValue不为空时,目标值为fromValue 乘以 byValue;当fromValue为空时,目标值为layer对象的keyPath指定属性的当前值乘以byValue
@property(nullable, strong) id byValue;
示例代码
下方的示例代码中,在控制器类中添加了一个CALayer类型的属性myLayer,并且针对myLayer设置了一个平移的动画。
- 在控制器类中添加一个CALayer类的属性,作为动画播放的layer
@interface ViewController ()
@property (nonatomic, strong) CALayer *myLayer;
@end
- 通过懒加载的方式,设置自定义layer的属性
-(CALayer *)myLayer{
if (_myLayer == nil) {
_myLayer = [CALayer layer];
_myLayer.frame = CGRectMake(140, 100, 100, 100);
_myLayer.backgroundColor = [UIColor yellowColor].CGColor;
_myLayer.borderColor = [UIColor redColor].CGColor;
_myLayer.borderWidth = 4.0;
_myLayer.cornerRadius = 2.0;
}
return _myLayer;
}
- 添加该自定义layer到控制器视图的layer上
- (void)viewDidLoad {
[super viewDidLoad];
[self.view.layer addSublayer:self.myLayer];
}
- 当点击屏幕时,播放平移动画
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//1. 实例化CABasicAnimation对象
CABasicAnimation *animation = [CABasicAnimation animation];
//2. 设置动画属性
animation.keyPath = @"transform.translation.x";
animation.toValue = @100;
animation.duration = 2.0;
//3. 添加动画对象到一个CALayer类的对象上,播放动画
[self.myLayer addAnimation:animation forKey:nil];å
}
#CATransition转场动画
通过设置CATransition类中的属性,我们可以定制转场动画的效果,常用的属性主要包括:
- type:动画的类型。常用的有4种:fade(渐变)、moveIn(移入)、push(推入)、reveal(移出),默认为fade(渐变)
@property(copy) NSString *type;
- subType:动画的子类型,可以指定动画播放时开始的方位或方向,有4中方式:fromLeft(从左开始)、fromRight(从右开始)、fromTop(从上开始) 、fromBottom(从下开始)
@property(nullable, copy) NSString *subtype;
- 转场动画启动时以及结束时的进度百分比,取值为0~1,通过设置这两个属性,我们可以实现动画从中间某个状态开始播放,或者在中间某个状态提前结束。
@property float startProgress;
@property float endProgress;
示例:
在下方的示例代码中,我们实现了当点击屏幕时,切换一个UIImageView控件显示图像的动画过程。
- 在控制器类中添加一个UIImageView类的属性
@interface ViewController ()
@property (nonatomic ,strong) UIImageView *transitionView;
@end
- 通过懒加载的方式,设置transitionView的属性
-(UIImageView *)transitionView{
if (_transitionView == nil) {
_transitionView = [[UIImageView alloc] initWithFrame:CGRectMake(140, 100, 100, 100)];
_transitionView.image = [UIImage imageNamed:@"99ios"];
}
return _transitionView;
}
- 添加transitionView到控制器视图的view上
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.transitionView];
}
- 当点击屏幕时,transitionView显示的图片会发生变化,但变化的过程会展示一段动画。
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//切换图片显示
self.transitionView.image = [UIImage imageNamed:@"football"];
//创建一个CATransition动画对象
CATransition *animation = [CATransition animation];
animation.type = @"fade";
animation.duration = 2.0;
//添加CATransition对象到transitionView的layer上
[self.transitionView.layer addAnimation:animation forKey:nil];
}