版本記錄
| 版本號(hào) | 時(shí)間 |
|---|---|
| V1.0 | 2017.09.24 |
前言
app中好的炫的動(dòng)畫可以讓用戶耳目一新，為產(chǎn)品增色不少，關(guān)于動(dòng)畫的實(shí)現(xiàn)我們可以用基本動(dòng)畫壤追、關(guān)鍵幀動(dòng)畫、序列幀動(dòng)畫以及基于CoreGraphic的動(dòng)畫等等供屉，接下來這幾篇我就介紹下我可以想到的幾種動(dòng)畫繪制方法行冰。具體Demo示例已開源到Github —— 刀客傳奇，感興趣的可以看我寫的另外幾篇伶丐。
1. 實(shí)現(xiàn)動(dòng)畫方式深度解析（一） —— 播放GIF動(dòng)畫（一）
2. 實(shí)現(xiàn)動(dòng)畫方式深度解析（二） —— 播放GIF動(dòng)畫之框架FLAnimatedImage的使用（二）
3. 實(shí)現(xiàn)動(dòng)畫方式深度解析（三） —— 播放序列幀動(dòng)畫（一）
4. 實(shí)現(xiàn)動(dòng)畫方式深度解析（四） —— QuartzCore框架（一）
5. 實(shí)現(xiàn)動(dòng)畫方式深度解析（五） —— QuartzCore框架之CoreAnimation（二）
6. 實(shí)現(xiàn)動(dòng)畫方式深度解析（六） —— Core Animation Basics（三）
7. 實(shí)現(xiàn)動(dòng)畫方式深度解析（七） —— Core Animation之Setting Up Layer Objects（四）
8. 實(shí)現(xiàn)動(dòng)畫方式深度解析（八） —— Core Animation之動(dòng)畫層內(nèi)容 （五）
9. 實(shí)現(xiàn)動(dòng)畫方式深度解析（九） —— Core Animation之構(gòu)建圖層層級(jí) （六）
10. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十） —— Core Animation之高級(jí)動(dòng)畫技巧 （七）
11. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十一） —— Core Animation之更改圖層的默認(rèn)行為（八）
12. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十二） —— Core Animation之提高動(dòng)畫的性能（九）
13. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十三） —— Core Animation之圖層樣式屬性動(dòng)畫（十）
14. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十四） —— Core Animation之 KVC 擴(kuò)展（十一）
15. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十五） —— Core Animation之可動(dòng)畫屬性 （十二）
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里面幾個(gè)類的層級(jí)關(guān)系肛走。
上面這個(gè)層級(jí)關(guān)系，大家一定要記住录别，有助于幫助大家理解這個(gè)結(jié)構(gòu)和功能使用朽色。
CABasicAnimation的幾個(gè)簡(jiǎn)單示例
下面我們就看一下CABasicAnimation的幾個(gè)簡(jiǎn)單示例。
1. 移動(dòng)
下面我們就直接看代碼组题。
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIView *animatedView;
@end
@implementation ViewController
#pragma mark - Override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
//設(shè)置UI
[self setupUI];
//位移動(dòng)畫
[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)];
//添加動(dòng)畫
[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
下面看一下效果驗(yàn)證
2. 旋轉(zhuǎn)
下面我們還是直接看代碼葫男。
- (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];
//添加動(dòng)畫
[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];
//添加動(dòng)畫
[self.animatedView.layer addAnimation:basicAnimation forKey:@"scale-layer"];
}
下面效果
與組動(dòng)畫CAAnimationGroup相關(guān)
我們可以利用組動(dòng)畫CAAnimationGroup進(jìn)行設(shè)置一組動(dòng)畫，下面我們就看一下代碼崔列。
- (void)demoGroupAnimation
{
self.animatedView.frame = CGRectMake(50.0, 200.0, 100.0, 100.0);
//向x方向移動(dòng)
CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
moveAnimation.toValue = [NSNumber numberWithFloat:200.0];
//繞z軸旋轉(zhuǎn)
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];
//動(dòng)畫組
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"];
}
下面我們就看一下執(zhí)行效果
與代理相關(guān)
很多時(shí)候我們需要知道動(dòng)畫的開始和結(jié)束梢褐，以便可以在其中做邏輯處理。這個(gè)時(shí)候我們需要的就是代理赵讯。
下面我們就看一下代碼利职。
#import "ViewController.h"
@interface ViewController () <CAAnimationDelegate>
@property (nonatomic, strong) UIView *animatedView;
@end
@implementation ViewController
#pragma mark - override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
//設(shè)置UI
[self setupUI];
//位移動(dòng)畫
[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)];
//添加動(dòng)畫
[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(@"動(dòng)畫開始了");
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
NSLog(@"animation = %@", anim);
NSLog(@"Flag = %d", flag);
NSLog(@"動(dòng)畫結(jié)束了");
}
@end
下面看輸出結(jié)果
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] 動(dòng)畫開始了
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] 動(dòng)畫結(jié)束了
可見，實(shí)現(xiàn)了代理CAAnimationDelegate瘦癌，就可以監(jiān)測(cè)動(dòng)畫的開始和結(jié)束猪贪，可以做相應(yīng)的處理操作。
后記
未完讯私，待續(xù)~~~~
