版本記錄
| 版本號(hào) | 時(shí)間 |
|---|---|
| V1.0 | 2017.09.27 |
前言
app中好的炫的動(dòng)畫(huà)可以讓用戶(hù)耳目一新锐朴，為產(chǎn)品增色不少入偷，關(guān)于動(dòng)畫(huà)的實(shí)現(xiàn)我們可以用基本動(dòng)畫(huà)印荔、關(guān)鍵幀動(dòng)畫(huà)、序列幀動(dòng)畫(huà)以及基于CoreGraphic的動(dòng)畫(huà)等等从撼，接下來(lái)這幾篇我就介紹下我可以想到的幾種動(dòng)畫(huà)繪制方法州弟。具體Demo示例已開(kāi)源到Github —— 刀客傳奇钧栖，感興趣的可以看我寫(xiě)的另外幾篇。
1. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（一） —— 播放GIF動(dòng)畫(huà)（一）
2. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（二） —— 播放GIF動(dòng)畫(huà)之框架FLAnimatedImage的使用（二）
3. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（三） —— 播放序列幀動(dòng)畫(huà)（一）
4. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（四） —— QuartzCore框架（一）
5. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（五） —— QuartzCore框架之CoreAnimation（二）
6. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（六） —— Core Animation Basics（三）
7. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（七） —— Core Animation之Setting Up Layer Objects（四）
8. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（八） —— Core Animation之動(dòng)畫(huà)層內(nèi)容 （五）
9. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（九） —— Core Animation之構(gòu)建圖層層級(jí) （六）
10. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十） —— Core Animation之高級(jí)動(dòng)畫(huà)技巧 （七）
11. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十一） —— Core Animation之更改圖層的默認(rèn)行為（八）
12. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十二） —— Core Animation之提高動(dòng)畫(huà)的性能（九）
13. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十三） —— Core Animation之圖層樣式屬性動(dòng)畫(huà)（十）
14. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十四） —— Core Animation之 KVC 擴(kuò)展（十一）
15. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十五） —— Core Animation之可動(dòng)畫(huà)屬性 （十二）
16. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十六） —— Core Animation之CABasicAnimation動(dòng)畫(huà)示例 （十三）
17. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十七） —— Core Animation之CAKeyframeAnimation動(dòng)畫(huà)示例 （十四）
18. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十八） —— UIView動(dòng)畫(huà) （一）
19. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（十九） —— Lottie - iOS動(dòng)畫(huà) （一）
20. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（二十） —— Lottie - iOS動(dòng)畫(huà)之示例分享 （二）
21. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（二十一） —— Keyframes動(dòng)畫(huà)之框架基本 （一）
22. 實(shí)現(xiàn)動(dòng)畫(huà)方式深度解析（二十二） —— Keyframes動(dòng)畫(huà)之簡(jiǎn)單示例（二）
功能要求
關(guān)于CoreGraphic這個(gè)框架的基本情況就不多說(shuō)了婆翔，前面我寫(xiě)過(guò)這個(gè)框架的一些東西拯杠，相信大家對(duì)它多少有一定的了解。
在我們利用CoreGraphic進(jìn)行動(dòng)畫(huà)之前還是要給大家看一下相關(guān)的架構(gòu)啃奴。
它是一個(gè)C語(yǔ)言框架潭陪，也不是處理動(dòng)畫(huà)的專(zhuān)門(mén)框架，可以看見(jiàn)他的頂層是CoreAnimation最蕾，CoreAnimation是專(zhuān)門(mén)處理動(dòng)畫(huà)的依溯，底層封裝的就是CoreGraphic，這里給大家介紹利用CoreGraphic進(jìn)行動(dòng)畫(huà)瘟则，只是給大家提供了一種額外做動(dòng)畫(huà)的可能性黎炉，在實(shí)際動(dòng)畫(huà)實(shí)現(xiàn)中還有很多其他方案可供參考。
功能實(shí)現(xiàn)
下面我們直接看代碼
1. ViewController.m
#import "ViewController.h"
#import "JJCoreGraphicView.h"
@interface ViewController ()
@property (nonatomic, strong) JJCoreGraphicView *coregraphicView;
@property (nonatomic, assign) CGFloat progress;
@property (nonatomic, strong) NSTimer *timer;
@end
@implementation ViewController
#pragma mark - Override Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
JJCoreGraphicView *coregraphicView = [[JJCoreGraphicView alloc] initWithFrame:self.view.frame];
coregraphicView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:coregraphicView];
self.coregraphicView = coregraphicView;
self.progress = 0.0;
[self setupTimer];
}
#pragma mark - Object Private Function
- (void)setupTimer
{
NSTimer *timer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(timerDidWork) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
self.timer = timer;
}
#pragma mark - Action && Notification
- (void)timerDidWork
{
if (self.progress >= 1.0) {
[self.timer invalidate];
self.timer = nil;
return;
}
self.coregraphicView.progress = self.progress;
self.progress += 0.1;
}
@end
2. JJCoreGraphicView.h
#import <UIKit/UIKit.h>
@interface JJCoreGraphicView : UIView
@property (nonatomic, assign) CGFloat progress;
@end
3. JJCoreGraphicView.m
#import "JJCoreGraphicView.h"
@implementation JJCoreGraphicView
#pragma mark - Override Base Function
- (void)drawRect:(CGRect)rect
{
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGPoint center = CGPointMake(200.0, 300);
CGFloat radius = 100.0;
CGFloat startAngle = - M_PI_2;
CGFloat endAngle = - M_PI_2 + self.progress * M_PI * 2;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
[path setLineWidth:5.0];
[[UIColor blueColor] setStroke];
CGContextAddPath(contextRef, path.CGPath);
CGContextStrokePath(contextRef);
}
#pragma mark - Getter && Setter
- (void)setProgress:(CGFloat)progress
{
_progress = progress;
[self setNeedsDisplay];
}
@end
代碼不是很多醋拧，具體就是利用定時(shí)器慷嗜，控制一個(gè)變量的值，在定義view中不斷更改值和重繪丹壕，達(dá)到了動(dòng)畫(huà)的效果庆械。
功能效果
下面我們就看一下功能效果。
可見(jiàn)菌赖，可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)缭乘。
后記
未完，待續(xù)~~~~
