版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2017.09.24 |
前言
app中好的炫的动画可以让用户耳目一新，为产品增色不少，关于动画的实现我们可以用基本动画、关键帧动画、序列帧动画以及基于CoreGraphic的动画等等，接下来这几篇我就介绍下我可以想到的几种动画绘制方法。具体Demo示例已开源到Github —— 刀客传奇，感兴趣的可以看我写的另外几篇。
1. 实现动画方式深度解析（一） —— 播放GIF动画（一）
2. 实现动画方式深度解析（二） —— 播放GIF动画之框架FLAnimatedImage的使用（二）
3. 实现动画方式深度解析（三） —— 播放序列帧动画（一）
4. 实现动画方式深度解析（四） —— QuartzCore框架（一）
5. 实现动画方式深度解析（五） —— QuartzCore框架之CoreAnimation（二）
6. 实现动画方式深度解析（六） —— Core Animation Basics（三）
7. 实现动画方式深度解析（七） —— Core Animation之Setting Up Layer Objects（四）
8. 实现动画方式深度解析（八） —— Core Animation之动画层内容 （五）
9. 实现动画方式深度解析（九） —— Core Animation之构建图层层级 （六）
10. 实现动画方式深度解析（十） —— Core Animation之高级动画技巧 （七）
11. 实现动画方式深度解析（十一） —— Core Animation之更改图层的默认行为（八）
12. 实现动画方式深度解析（十二） —— Core Animation之提高动画的性能（九）
13. 实现动画方式深度解析（十三） —— Core Animation之图层样式属性动画（十）
14. 实现动画方式深度解析（十四） —— Core Animation之 KVC 扩展（十一）
15. 实现动画方式深度解析（十五） —— Core Animation之可动画属性 （十二）
CABasicAnimation基本
先看一下API文档。
/** Subclass for basic (single-keyframe) animations. **/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CABasicAnimation : CAPropertyAnimation
/* The objects defining the property values being interpolated between.
* All are optional, and no more than two should be non-nil. The object
* type should match the type of the property being animated (using the
* standard rules described in CALayer.h). The supported modes of
* animation are:
*
* - both `fromValue' and `toValue' non-nil. Interpolates between
* `fromValue' and `toValue'.
*
* - `fromValue' and `byValue' non-nil. Interpolates between
* `fromValue' and `fromValue' plus `byValue'.
*
* - `byValue' and `toValue' non-nil. Interpolates between `toValue'
* minus `byValue' and `toValue'.
*
* - `fromValue' non-nil. Interpolates between `fromValue' and the
* current presentation value of the property.
*
* - `toValue' non-nil. Interpolates between the layer's current value
* of the property in the render tree and `toValue'.
*
* - `byValue' non-nil. Interpolates between the layer's current value
* of the property in the render tree and that plus `byValue'. */
@property(nullable, strong) id fromValue;
@property(nullable, strong) id toValue;
@property(nullable, strong) id byValue;
@end
它继承了类CAPropertyAnimation。
这里还要和大家啰嗦一下，Core Animation里面几个类的层级关系。
上面这个层级关系，大家一定要记住，有助于帮助大家理解这个结构和功能使用。
CABasicAnimation的几个简单示例
下面我们就看一下CABasicAnimation的几个简单示例。
1. 移动
下面我们就直接看代码。
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIView *animatedView;
@end
@implementation ViewController
#pragma mark - Override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
//设置UI
[self setupUI];
//位移动画
[self demoPositionAnimation];
}
#pragma mark - Object Private Function
- (void)demoPositionAnimation
{
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
basicAnimation.duration = 2.0;
basicAnimation.repeatCount = 100;
//起始和终止位置
basicAnimation.fromValue = [NSValue valueWithCGPoint:self.animatedView.layer.position];
basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300.0, 600.0)];
//添加动画
[self.animatedView.layer addAnimation:basicAnimation forKey:@"move-layer"];
}
- (void)setupUI
{
self.view.backgroundColor = [UIColor lightGrayColor];
self.animatedView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 50.0, 50.0)];
self.animatedView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.animatedView];
}
@end
下面看一下效果验证
2. 旋转
下面我们还是直接看代码。
- (void)demoRotationAnimation
{
self.animatedView.frame = CGRectMake(50.0, 200.0, 200.0, 200.0);
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
basicAnimation.duration = 3.0;
basicAnimation.repeatCount = 10;
//起始和终止位置
basicAnimation.fromValue = [NSNumber numberWithFloat:0.0];;
basicAnimation.toValue = [NSNumber numberWithFloat:2 * M_PI];
//添加动画
[self.animatedView.layer addAnimation:basicAnimation forKey:@"rotate-layer"];
}
下面我们就看一下效果
3. 缩放
下面我们还是直接看代码
- (void)demoScaleAnimation
{
self.animatedView.frame = CGRectMake(50.0, 200.0, 200.0, 200.0);
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
basicAnimation.duration = 3.0;
basicAnimation.repeatCount = 10;
basicAnimation.autoreverses = YES;
//起始和终止位置
basicAnimation.fromValue = [NSNumber numberWithFloat:1.0];
basicAnimation.toValue = [NSNumber numberWithFloat:0.4];
//添加动画
[self.animatedView.layer addAnimation:basicAnimation forKey:@"scale-layer"];
}
下面效果
与组动画CAAnimationGroup相关
我们可以利用组动画CAAnimationGroup进行设置一组动画，下面我们就看一下代码。
- (void)demoGroupAnimation
{
self.animatedView.frame = CGRectMake(50.0, 200.0, 100.0, 100.0);
//向x方向移动
CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
moveAnimation.toValue = [NSNumber numberWithFloat:200.0];
//绕z轴旋转
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.fromValue = [NSNumber numberWithFloat:0.0];
rotationAnimation.toValue = [NSNumber numberWithFloat:2 * M_PI];
//缩放
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.autoreverses = YES;
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.4];
//动画组
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.duration = 3.0;
animationGroup.repeatCount = 10;
animationGroup.animations = [NSArray arrayWithObjects:moveAnimation, rotationAnimation, scaleAnimation, nil];
[self.animatedView.layer addAnimation:animationGroup forKey:@"move-rotate-scale-layer"];
}
下面我们就看一下执行效果
与代理相关
很多时候我们需要知道动画的开始和结束，以便可以在其中做逻辑处理。这个时候我们需要的就是代理。
下面我们就看一下代码。
#import "ViewController.h"
@interface ViewController () <CAAnimationDelegate>
@property (nonatomic, strong) UIView *animatedView;
@end
@implementation ViewController
#pragma mark - override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
//设置UI
[self setupUI];
//位移动画
[self demoPositionAnimation];
}
#pragma mark - Object Private Function
- (void)demoPositionAnimation
{
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
basicAnimation.duration = 1.0;
basicAnimation.repeatCount = 1;
basicAnimation.delegate = self;
//起始和终止位置
basicAnimation.fromValue = [NSValue valueWithCGPoint:self.animatedView.layer.position];
basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300.0, 600.0)];
//添加动画
[self.animatedView.layer addAnimation:basicAnimation forKey:@"move-layer"];
}
- (void)setupUI
{
self.view.backgroundColor = [UIColor lightGrayColor];
self.animatedView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 50.0, 50.0)];
self.animatedView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.animatedView];
}
#pragma mark - CAAnimationDelegate
- (void)animationDidStart:(CAAnimation *)anim
{
NSLog(@"animation = %@", anim);
NSLog(@"动画开始了");
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
NSLog(@"animation = %@", anim);
NSLog(@"Flag = %d", flag);
NSLog(@"动画结束了");
}
@end
下面看输出结果
2017-09-24 13:49:49.472 JJCoreAnimation_demo7[3485:288887] animation = <CABasicAnimation: 0x60000003b600>
2017-09-24 13:49:49.472 JJCoreAnimation_demo7[3485:288887] 动画开始了
2017-09-24 13:49:50.470 JJCoreAnimation_demo7[3485:288887] animation = <CABasicAnimation: 0x60000003b600>
2017-09-24 13:49:50.470 JJCoreAnimation_demo7[3485:288887] Flag = 1
2017-09-24 13:49:50.470 JJCoreAnimation_demo7[3485:288887] 动画结束了
可见，实现了代理CAAnimationDelegate，就可以监测动画的开始和结束，可以做相应的处理操作。
后记
未完，待续~~~~
