iOS开发Core Animation之CAAnimation动画

Core Animation是Apple提供的一套功能特别强大的动画库,可以帮助我们开发人员实现很多炫酷一点的效果,当然apple还给我们封装了一些基础的动画比如UIView的一些API方法,可是封装的东西都不是很灵活,所以我们还是很有必要了解一波CAAnimation这个类,不过在这之前,必须要了解的一个东西就是CALayer这个对象。

1.CALayer

为什么一定要说CALayer呢?因为CAAnimation的动画都是在CALayer层进行的,什么是CALayer呢?请看下图Apple给的官方文档解释:


CALayer.png

说了那么多,其实就是一句话:动画都是在CALayer层上进行的并且渲染、绘制都是在此上面进行的,点进去看一下CALayer的interface,我们可以看到一些UIView的一些属性,那么UIView和CALayer有什么区别呢?
我们可以看到CALayer继承于NSObject而UIView继承于UIResponder,为了能响应事件,UIView应运而生,
CALayer和UIView最大的区别就是UIView能响应事件,而Layer不能,Layer负责渲染,而UIView不能.
看下图CALayer的interface:


CALayer.png

可以看到关键字 "Animatable",可以看到代表是可以进行动画的,作为主要负责渲染绘制的一个类,所以图像的一些基本属性它是都拥有的,有些什么属性,这里不做介绍,请大家自行去API看。

2.CAAnimation
让我们看下这个类的官方文档解释:


CAAnimation.png

CAAnimation作为Core Animations的抽象类,我们具体使用是使用它的子类:CABasicAnimation、CAKeyframeAnimation、CAAnimationGroup、CATransition
看下图的层级结构图:


核心动画结构.png

下面我们来看看CAAnimation的相关属性:
CAAnimation属性.png

在初始化CAAnimation对象的时候使用的类方法里面需要指定一个keyPath:
CAAnimationKeyPath.png

CABasicAnimation只是基础的动画只是一个单一的动画效果(从一个数值fromValue到另外一个数值toValue),而CAKeyFrameAnimation会使用一个NSArray来保存这些数值,相比于CABasicAnimation是一种更加灵活的动画方式,而CAAnimationGroup用于保存多种动画效果(相当于同时进行)而CATransition用于做转场动画,为view提供移出或者进入屏幕的动画效果, 由于本人技术有限,其实这里讲的只是CoreAnimation的一小部分,重在代码实践,用的多了自然会熟悉些,进而实现更复杂的动画效果,废话不多说,直接上代码:

//
//  CircleView.m
//  AnimationDemo
//
//  Created by Chan on 2018/1/18.
//  Copyright © 2018年 Chan. All rights reserved.
//

#import "CircleView.h"

@interface CircleView(){
    UIView *_dotView;
}

@end

@implementation CircleView

#pragma mark --initialize Method
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
        _dotView = [[UIView alloc] initWithFrame:CGRectMake(self.bounds.size.width/ 2.0 - 10, self.bounds.size.height - 10, 20, 20)];
        _dotView.backgroundColor = [UIColor orangeColor];
        _dotView.clipsToBounds = YES;
        _dotView.layer.cornerRadius = 10;
        [self addSubview:_dotView];
    }
    return self;
}

#pragma mark --private Method
- (void)startAnimation {
    /*CGMutablePathRef path = CGPathCreateMutable();
      CGPathAddArc(path, nil, self.frame.size.width / 2.0
             , self.frame.size.height / 2.0, self.frame.size.height * 0.5 - 10, 0, 2*M_PI, 0.0);*/
//    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2.0) radius:self.bounds.size.height / 2.0  startAngle:0 endAngle:2*M_PI clockwise:YES];
    UIBezierPath  *path = [UIBezierPath bezierPath];
    //    [path addQuadCurveToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height) controlPoint:CGPointMake(self.bounds.size.width,0)];
    [path addArcWithCenter:CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2.0) radius:self.bounds.size.height / 2.0
                startAngle:0
                  endAngle:2 * M_PI clockwise:YES];
    //圆形路径
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.repeatCount = HUGE_VAL;
    animation.duration = 10.0;
    animation.speed = 5.0;
    animation.path = path.CGPath;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    [_dotView.layer  addAnimation:animation forKey:@"circleAnimation"];
    
    //透明度
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.repeatCount = HUGE_VAL;
    opacityAnimation.fromValue =@(1.0);
    opacityAnimation.toValue = @(0);
    opacityAnimation.duration = 10.0;
    opacityAnimation.removedOnCompletion = NO;
    opacityAnimation.fillMode  = kCAFillModeForwards;
    
    //放大
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.repeatCount = HUGE_VAL;
    scaleAnimation.fromValue = @(0);
    scaleAnimation.toValue = @(1.0);
    scaleAnimation.duration = 10.0;
    scaleAnimation.removedOnCompletion = NO;
    scaleAnimation.fillMode = kCAFillModeForwards;
    
    //动画组
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[opacityAnimation,scaleAnimation];
    group.repeatCount = HUGE_VAL;
    group.duration = 10.0;
    group.speed =  5.0;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    [self.layer addAnimation:group forKey:@"opacityAndScaleAnimation"];
}

- (void)drawRect:(CGRect)rect {
    //注意这里不需要调用superdrawRect方法
    CGContextRef ref = UIGraphicsGetCurrentContext();  //画布
    CGContextSetRGBStrokeColor(ref, 1.0, 0, 0, 1);  //设置画笔颜色
    CGContextSetRGBFillColor(ref, 0, 0, 1.0, 1.0);  //设置填充色
    CGContextSetLineWidth(ref, 2.0); //设置线条粗细
    CGContextSetAlpha(ref, 0.8); //设置透明度
    CGContextAddArc(ref, self.bounds.size.width *0.5,self.bounds.size.height*0.5,self.bounds.size.height* 0.5 , 0,2*M_PI, 0);
//    CGContextAddEllipseInRect(ref, CGRectMake(rect.origin.x + 5, rect.origin.y + 5, rect.size.width - 5, rect.size.height - 5)); //画椭圆
    CGContextDrawPath(ref, kCGPathFillStroke); //推荐使用这个 可以同时指定线条或者填充
//    CGContextStrokePath(ref);  //线条路径
//    CGContextFillPath(ref);//填充路径
}
@end

其动画效果如下所示:


Animation.gif
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容