ios史上最详细的动画讲解-加载等待动画(一)

前言

本文主要面向的对象是那些没有动画基础的入门引导,提供一个学习动画的正确途径,并且配以项目实战的效果的重点讲解。

正文

这篇文章要实现的效果如下图

效果图

实现这个效果需要了解基本概念
http://www.cnblogs.com/mjios/tag/objective-c/default.html?page=2
这个是明杰大神的入门讲解,

基础

你需要从这几篇文章中了解到以下的知识点

  • UIViewCALayer之间的关系(区别和联系)
  • Core Animation框架中使用的类
  • CALayerCore Animation之间的联系
  • CAAnimation的常用属性

如果你对这些基本的知识点已经全部理清楚,那么接下来你就可以继续往下看了,我们实现动画主要需要学习的类库QuartzCore,首先看一下这个类库

QuartzCore

首先有我们熟悉的CALayer``CAAnimation,对于从来没有做过动画的朋友来说,其他的类就不清楚了。下面我就简单介绍一下主要的类之间关系,以及单独类主要实现什么。

  • CAAnimation.h主要是各类动画的基类,我们一般不会使用它来做动画?;境S檬粜?/li>
//公有属性定义动画的节奏
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
//代理,例如捕捉动画的开始,动画的结束等
@property(nullable, strong) id delegate;
//动画执行完是否移除
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;
  • CABase.h可以忽略不看,是一些基本的配置

  • CADisplayLink.h帧动画,默认添加定时器,每秒刷多少帧,在gitHub上有facebook出品的一个pop动画,据说是居于帧动画
    https://github.com/facebook/pop

  • CAEAGLLayer是和<OpenGLES/EAGLDrawable.h>这个框架联合使用的,暂时用不到。

  • CAEmitter相关的是粒子动画,可以实现很多酷炫的效果

  • CAShapeLayer非常重要的一个类,常常与UIKit框架的UIBezierPath贝塞尔曲线联合使用,绘制曲线,圆形,各种复杂的图形都会使用到,非常非常重要,我的上一篇文章就是他们两个的结合

  • CAGradientLayer常见应用于锁屏底部闪烁的滑动来解锁。

  • CAReplicatorLayer 它独有的特性是,其子类具有相同的属性,这篇文章主要是它的应用。

其他的类,我是没有使用过,所以不做讲解。

下面我们看就上述动画讲解一个最简单,三个点加载动画,作为入门。

    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.bounds          = CGRectMake(0, 0, 100, 100);
    replicatorLayer.cornerRadius    = 10.0;
    replicatorLayer.position        =  self.view.center;
    replicatorLayer.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.2].CGColor;

[self.view.layer addSublayer:replicatorLayer];

那么我们会看到这个效果

replicatorLayer

接下来我们需要添加点

CALayer *dotLayer        = [CALayer layer];
    dotLayer.bounds          = CGRectMake(0, 0, 15, 15);
    dotLayer.position        = CGPointMake(15, replicatorLayer.frame.size.height/2 );
    dotLayer.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.6].CGColor;
    dotLayer.cornerRadius    = 7.5;
    
    [replicatorLayer addSublayer:dotLayer];

效果图

接下来我们会想在创建两个点,然后做动画就可以,不错这是一种可实现的思路,可以如果我们要做第一中类似旋转的动画,我们需要创建10个点,难道我们一个个去创建吗?我们现在使用的是CAReplicatorLayer,它有个属性instanceCount,是子类的个数,然后我们设置每个子类的位置即可

在上述代码添加

    replicatorLayer.instanceCount = 3;
    replicatorLayer.instanceTransform = CATransform3DMakeTranslation(replicatorLayer.frame.size.width/3, 0, 0);

效果


需要说明的是instanceTransform这个属性,它的作用是设置每个子Layer如何变化。CATransform3DMakeTranslation这个类的含义是使Layer根据X、Y、Z轴进行平移。我们需要的是平移,所以使用translation这个属性,如果我们是第一种圆形排放,那么我们需要这样设置

    CGFloat count                     =  10.0;
    replicatorLayer.instanceCount     = count;
    CGFloat angel                     = 2* M_PI/count;
    replicatorLayer.instanceTransform = CATransform3DMakeRotation(angel, 0, 0, 1);

解释一下CATransform3DMakeRotation,它是CATransform3D的一个结构(矩阵结构),含义是使Layer在X、Y、Z轴根据给定的角度旋转。我们需要平面旋转则坐标系为(0,0,1)。
看效果


接下来我们需要添加动画

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.duration    = 1.0;
    animation.fromValue   = @1;
    animation.toValue     = @0;
    animation.repeatCount = MAXFLOAT;
    [dotLayer addAnimation:animation forKey:nil];

编译运行看效果:


这不是我们需要的真实效果,我们还需要设置每一个sublayerinstanceDelay属性。

replicatorLayer.instanceDelay = 1.0/3;

编译运行看效果


我们会发现动画在开始前会有不流畅效果,我们应该给dotLayer一个初始的大小

dotLayer.transform = CATransform3DMakeScale(0, 0, 0);

这样我们就能实现这个比较简单的等待动画效果。

下面我们总结一下实现这个动画的步骤:

  • 1.首先创建一个可复用的CAReplicatorLayer,创建这个的目的是为了我添加的子类可以复用,一劳永逸;

  • 2.添加子Layer,设置子Layer所需要的样式;

  • 3.将子layer添加到CAReplicatorLayer上,并设置子layer个数和排布;

  • 4.给子layer添加动画效果,特别提醒一点transform一般针对的是缩放和旋转动画,当然也可以实现平移动画。

下面我总结一下常用动画的 keyPath

transform.rotation:旋转动画。
transform.rotation.x:按x轴旋转动画。
transform.rotation.y:按y轴旋转动画。
transform.rotation.z:按z轴旋转动画。
transform.scale:按比例放大缩小动画。
transform.scale.x:在x轴按比例放大缩小动画。
transform.scale.y:在y轴按比例放大缩小动画。
transform.scale.z:在z轴按比例放大缩小动画。
position:移动位置动画。
opacity:透明度动画。

最后向大家再分享一个闪烁的动画,本来这是一篇单独的文章,投稿首页已经通过审核,结果本人手贱不小心给删除了这篇文章,所以在这篇文章补上,这里只附swift代码,oc代码demo中查看。
首先我们看一下效果:


闪烁动画的实现主要是通过改变透明度,从而达成闪烁的效果,我将这个方法写成了一个分类,给CABasicAnimation添加一个分类,具体代码如下

import UIKit

class catergory: CABasicAnimation {

    
   class func opacityForever_Animation(time : NSTimeInterval) -> CABasicAnimation {
        
        
        let animation = CABasicAnimation(keyPath:"opacity")
        animation.fromValue = 1
        animation.toValue = 0
        animation.duration = time
        animation.autoreverses = true
        animation.removedOnCompletion = false
        animation.fillMode = kCAFillModeForwards
        animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseIn)

        return animation
    }

}

这样我们在外部可以给任何一个UIView添加闪烁动画。

结尾

本文具体实现的代码上传gitHub,demo中对这些动画进行了简单的封装,一是为了提高代码的质量和可读性,二是为了更符合项目实战,希望你在阅读的时候提出宝贵的意见,当然也欢迎你的Star。
下一篇文章主要是想分享一下CAShapeLayer和贝塞尔曲线结合的例子,当然你有更好的动画效果希望你能私信推荐给我,我会选择一些好的实现并分享。
https://github.com/markdashi/LoadingAnimation

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

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,480评论 6 30
  • Core Animation Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,...
    45b645c5912e阅读 3,022评论 0 21
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,107评论 5 13
  • 转载:http://08643.cn/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 6,183评论 0 13
  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 3,093评论 0 17