CodingFire的博客

先上图，看效果 这是之前App里买呢一个功能，当初没有写完，今天想起来，把这个功能给完善了，首先来讲讲这个功能的原理：1.上面浅绿色那一部分是利用贝塞尔曲线画出来的，这个问题不大；2.下面的那条弧线就是那条贝塞尔曲线，贝塞尔曲线有一个点叫顶点，大概位置就在头像最顶端那里，这个点和左右两边到屏幕的点组成了这条贝塞尔曲线；3.头像中点始终在贝塞尔曲线中点位置；4.曲线中点的坐标是有个公式可以

先来看看效果，正反变化都有： 这里博主用了组动画的方式，通过两种转换来完成： 1.通过bounds和position 2.通过transform.scale.y和position通过bounds和position1.创建一个layer CALayer *itemLayer = [CALayer layer]; itemLayer.frame = CGRectMake(50, 100,

先看下动画效果： 这里使用粒子动画，加上基础动画组合实现，还有一些绘图的方法，代码注释写的很清楚，看下面代码：#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad { [super viewDidLoad]; // Do

最近看到个分屏效果，觉得挺好玩的，所以就写出来给大家分享一下，首先来看效果： 看着有点卡，因为是模拟器的缘故，真机上肯定是不会有的，用到的技术包括，CABasicAnimation，CALayer，贝赛尔曲线，还有动画结束的代理方法，都是之前已经介绍过使用方法的技术，进行巧妙的组合就出现了这样的分屏效果。动画分三部分，其中1，2是关联操作：1.屏幕中央的曲线分界线是贝赛尔曲线； 2.用CAL

关于CAAnimation的懂画执行，我们见过的组多的都是以匀速运动的，而实际上，物体的运动速度并不是匀速的，要么一直加速，要么先加速后减速等等，为了实现这一缓冲的过程，需要设置CAAnimation的timingFunction属性，它是CAMediaTimingFunction的一个对象，如果要设置隐式动画的计时函数，就设置CATransaction的+setAnimationTimingFun

点赞我们都知道，最简单的就是通过Bool变量或者selected来判断是否选中，然后替换原来的图片，要想有个简单的动画效果，前面博主写过Core Animation里的关键帧动画，这里就用关键帧动画CAKeyframeAnimation来做，只需要在按钮响应方法中添加以下代码，同时替换图片： if (_isSelected == NO) { _isSelected = YES;

在前面的CAAnimation中，用到了多种很多种图层动画，既然是动画，他们都是动态的，所以每个动画都有自己的发生时间，接下来看看Core Animation是如何来跟踪时间的：CAMediaTiming协议CAMediaTiming定义了一段动画内用来控制逝去时间的属性集合，CALayer和CAAnimation都实现了这一协议，所以时间才能被任意一个时间或者动画控制。时间的控制涉及到dura

按照惯例先来交代故事背景，有人在问饼状图怎么动态来画？然后博主就在想，刚好最近一直在看动画的东西，虽然没直接画饼状图，但是通过属性调整，饼状图绘制起来也是妥妥的啊。于是综合前一阵子所学，用了以下两种方法来实现饼状图的绘制。首先，来看下效果图： 如有卡顿，请自行忽略，真机上是不会出现的。第一种方法：使用CAShapeLayer，贝塞尔曲线和CABasicAnimation来画原理：1.使用贝塞尔曲线

前面有说过关键帧动画，用来绘制沿着贝赛尔曲线前进的动画，这里要说的东西是values和keyTimes，这两个属性的运用在前面点击按钮摇动后画圆中有体现，但是觉得还是应该单独拉出来再说一下，听名字就知道这是一个分步的动画过程，values和times掌握着动画动的朝向和各步的时间，前面的运用跟贝赛尔曲线结合起来，用了贝赛尔曲线的路径组成一帧一帧的动画，这里是手动设置，先来看怎么让一个按钮点击后摇动，

上一篇中说到过渡动画，使用CATransition，但是CATransition提供的动画类型太少了，而且苹果通过 UIView +transitionFromView:toView:duration:options:completion: +transitionWithView:duration:opt ions:animations:方法提供了Core Animation的过渡效果，除了U

开发中，我们都希望能通过属性动画对一些比较难做动画的布局做变化，而属性动画只对图层的可动画属性起作用，所以要改变一个不能动画的属性或者从当前界面移除，属性动画将不起作用。为了解决上面的问题，才有了过渡动画，过渡动画不像属性动画那样很平滑的从一个值过渡到另一个值，而是先出现上一个图形的轮廓外观，然后在两者之间进行交换，替换。要是用过渡动画就要使用CATransition，它有type和subType两

前面的博客有对cocoachina上一篇动画的文章做过简单的说明，我们所看到的各种动画其实就是动画的组合，把不同的动画组合起来就成了很多我们认为高大上的效果，看下图，边移动变换颜色： 其中沿贝赛尔曲线运动是一个运动轨迹的动画，变换颜色是另一个动画，通过CAAnimationGroup就让它们同时执行，下面看代码：UIBezierPath *bezierPath = [[UIBezierPath

CAAnimationDelegate从名字就可以看出这是一个动画的代理，里面有什么方法呢？其中最主要的就是一个动画结束之后的代理方法：-animationDidStop:finished:，这个方法在动画结束之后用来更新图层，CAAnimationDelegate在任何头文件中都找不到，但是可以在CAAnimation的头文件中找到相关函数。来说下它的使用方法，举个简单例子，以前面博客中改变图层颜

今天在cocoachina看到一篇不错的关于动画的文章，http://www.cocoachina.com/ios/20160620/16763.html这是地址，博主不是要转载，而是看完之后有点感触，觉得动画真的没有想象的那么难，如果你恰巧看过，或者你还没看，你可以看完之后来看博主对于动画的解析，然后你也许会发现动画其实没那么难。当然，前提是你要知道动画的一点基础，比如CAShapeLayer，U

关键帧动画如其名是由Core Animation在每帧之间插入的动画，它不同于隐式动画在动画结束后才执行操作，也不限于起始和结束的值，而是根据一连串随意的值来进行的。它依赖于CAKeyframeAnimation，是UIKit一个没有暴露出来的类，把它运用于前面改变颜色的工程中，会发现颜色是渐变切换的，唯一的问题就是颜色在换的瞬间没有缓冲，后面会说到：//create a keyframe anim

前面我们是对Layer层进行的动画，现在我们对UIView关联的图层进行同样的动画，一样的代码会发现，对UIView关联的图层动画平滑过渡的效果消失了，颜色直接跳变，那也就是说UIKit直接禁止了隐式动画。 先说下隐式动画的实现原理：当使用CALayer的属性时，图层首先检测它是否有委托并实现了CALayerDelegate中的actionForLayer：forKey方法。如果有委托的话，直接

什么是完成块呢？这类似于我们使用block完成事务后的回调，在完成既定的事物后出发的某种操作，拿上一篇隐式动画中的改变颜色来说可以为他设定一个完成块，在颜色变换之后将色块旋转90度： //begin a new transaction [CATransaction begin]; //set the animation duration to 1 second [

看了隐式动画才知道原来我们经常写的直接展示的或者跳变的东西其实都是有动画的，之所以我们没有看到是因为未指定动画类型，Core Animation提供了方法去做动画，并支持显示动画。通过Core Animation我们指定动画的类型和持续时间。 CATransaction用来管理这些事务，CATransaction没有属性或者实例方法，它只有入栈和出栈＋begin//入栈＋commit//出栈+se

CAEmitterLayer是一个例子引擎，我们可以把它比作一个太阳，它向四面八方辐射粒子，然后我们用上图片和它的一些设置就做出来了爆炸效果，详细的设置见代码和注释： CAEmitterLayer *emitter = [CAEmitterLayer layer]; emitter.frame = self.view.bounds; [self.view.layer addSubla

由一个颜色过渡到另一个颜色，甚至直接作出彩虹的效果，这便是CAGradientLayer的作用，CAGradientLayer有startPoint和endPoint两个属性，分别是｛0，0｝和｛1，1｝： //create gradient layer and add it to our container view CAGradientLayer *gradientLayer = [CA

在做3D事物的时候，我们都需要做出独立的3D效果，在前面的博客中，我们画过一个3D的立方体，但是它却并不是独立的，而是由放在主视图上的6张子视图通过平移旋转得到的，这里通过CATransformLayer我们可以得到完全独立的3D图形，可以直接对整个3D事物进行一些操作。需要说明的是CATransformLayer并不显示自身的内容，只有当存在了一个作用域子图层时才会显示子图层的变换，CATrans

1.CATextLayer 为什么要存在CATextLayer呢？它的意义是什么？我们可以用UILabel来写文字，但两者不是一码事，CATextLayer的渲染速度比UILabel快的多，而UILabel的精髓就是用图层代理把字符串用Core Graphics写入如层，CATextLayer则不用，它以涂层的形式几乎包含了UILabel所有的特性，并有额外的新特性。 //create a tex

这个方法要写在继承了UIView的类里。- (void)drawRect:(CGRect)rect{ CGContextRef context=UIGraphicsGetCurrentContext(); //画线------------- //设置起点 CGContextMoveToPoint(context, 20, 20); //设置终点 CGCo

这是效果图，会看到稍微有点杂色，这个是截图软件没设置好，我们只看动画就行，上面的是个按钮，点击后开始摇晃并画圆，首先感谢熊熊提的这个问题，再感谢飞机的基础代码贡献，我才学会了这个动画，下面来分享下。 直接上代码：- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading th

跟绘制火柴人方法类似，但这里我们不需要一条条的线来绘制，有更快捷的方法：//指定矩形大小 CGRect rect=CGRectMake(50, 300, 100, 100); //设置圆角半径 CGSize size=CGSizeMake(20, 20); //拿出需要设置改动的角 UIRectCorner corners=UIRectCornerTopRight |

以后关于这本书，博主不会再细分章节来写博客，而是通过代码和自己的理解直观的呈现出来，当然，顺序还是和这本书的顺序一样。要绘制一个火柴人，首先需要用到绘图功能，CGPath必不可少，那怎么来绘制呢？ 首先是一个圆，接着是几条线，不过有一点可以确定，他们都是线条构成的，直线可能画起来不难，可是圆呢？有没有直接能画圆的方法呢？当然是有的，下面，博主通过代码的方式，边说边画： 为了更好的管理内存，我

1.背面 在3D场景中，当一张平面图片被旋转后我们将会看到什么呢？实际上，当旋转180度后，我们看到的仍然是跟原图一样的镜像对称图，也就是说在3D环境中一个立方体正面朝上，我们看不到的部分实际上是绘制出来的，既然我们看不到为什么还要绘制出来，明显是浪费了CPU和内存的，CALayer提供了一个属性doubleSided来控制背面是否绘制，默认为NO，设置为YES后，当图片旋转180度后将看不到对称

上一节说了3D变换，这一节，继续来说3D变换中的几个点 1.透视投影 真实世界中，当物体远离视线时物体从视角来看变小了，但实际上他们并没有发生变化，等间距的两个物体，它们缩放的比例是一样的。这是我们所说的正常的投影。 为了达到透视的效果，我们需要手动的来修改矩阵值，Core Animation并没有提供这个函数，然而CATransform3D可以通过矩阵中一个简单的元素来控制：m34 博

以前我们说的变换全都是基于2D的变换，这一节，来说下3D的变换，也就是我们常说的三维立体。 这里引入一个属性zPosition，它可以控制让图层靠近或者原理摄像机，transform中的CATransform3D可以做到这一点，和2D的变换类似，3D的变换也是一个矩阵，不过它是一个4X4的矩阵： 这里的道理和2D变换一样，就不重复说明了，忘记的可以去看上一节说的。 不同于2D的旋转，3D的

上一篇博客中说了仿射变换，利用系统提供的transform方法对视图图层进行旋转，缩放，平移，这一节的名字叫做混合变换，就是把上一节中的单步操作组合成一步来执行。 假设我们对位于screen中心的一个width和height均为200的视图进行操作，首先宽高各缩小一半，再旋转30度，后再向右平移200个点：CGAffineTransform transform = CGAffineTransfor

仿射变换 在上一章中有一个时钟的例子，在这个例子中，就使用了UIView的transform属性做了变换，transform这个属性是CGAffineTransform类型的，这个方法大多数人应该都用过，在视图中也比较常用，比如旋转，平移，放大缩小这些操作。这里他们的变化都是在二维空间进行的，后面还会有三位变换。而不管它怎么变换，原先平行的边在变换后依然是平行的，//旋转，这里的angle需要特别

博主今天把剩下的两个小节好好看了下，又敲了敲代码，还是发现了一些问题，那么下面下面在说这两节的过程中简述下博主遇到的问题，大家一起来看看，不清楚是博主代码的问题还是Xcode已经弥补了原先的缺陷。 1.拉伸过滤 当图片需要显示不同的大小时就会对图片进行拉伸，比如我们经常用到的设置头像等，它作用于原图片的像素上并根据需要生成新的像素图片展示在屏幕上。这里它有一个属性叫做magnificationF

上一篇说到阴影剪裁，这里我们继续往下介绍。 1.shadowPath 它是一个CGPathRef类型，我们通过这个属性来指定阴影的形状，话不多说，直接上代码：https://github.com/codeliu6572/ShadowShowPath请自行下载。 2.图层蒙版 这里博主也看了好几遍才理解含义，建议小伙伴直接看博主的描述然后再看一遍书中的描述，就可以很容易理解了。蒙板从使用角度就

1.圆角 在iOS中圆角矩形被运用得淋漓尽致，也成为苹果设计的标志性特点，而我们在开发中也常使用设置某个视图为圆角显示，设置方法为：self.layerView1.layer.cornerRadius = 20.0f;这个值默认为0，是一个直角，正常情况，不管怎么设置，他不会对子图层造成任何影响。相信很多人以前只知道这么来设置圆角，却不知道为什么，看到这里我想应该明白了，这其实是CALayer的一

上一篇博客中说到锚点，然后说了时钟里面的运用，忘记详细说明了，这里补充下，运用在了表针上面，可以看到表针是由图片做的，为了转动起来看着好看，最简单的办法就是图片做的长点，还要按照表针的位置来做时分秒的指针，但这对内存来说造成了不必要的影响，所以anchorPoint很好的利用图层的属性解决了占用内存的问题，所以指针按照方便的方法来做，设置他们的锚点：self.secondHand.layer.anc

我们知道图层也好，视图也罢，我们在使用时，它总是以某一形状出现，这便是图层的几何，这里我来简单说下图层几何这一章的学习过程。 1.布局 在UIView中有frame，bounds和center，而在CALayer中有frame，bounds和position，他们是一一相对的，bounds和center（position）决定了frame，所以frame是一个虚拟的东西，是由后两者算出来的，他们

上一篇博客中说道寄宿图里面用到的几个常用属性，这一篇继续把剩余的几个属性说完。 1.maskToBounds 类似视图中的cliksToBounds这个属性，他们的功能是一样的，超出父视图的部分会被截取掉。 2.contentsRect 我这里通俗的来说这个属性，它把整个Screen或者父视图作为一个坐标系，大小为｛0，0，1，1｝整个视图都是可见的，设置的contentRect代表其中的某

contents 寄宿图如其名，它本身并不是这一块的，只是被放在这里寄宿的。在Core Animation中CALayer有一个属性叫做contents，它被定义为id类型，意味着contends可以是任何类型的对象，但除非我们给contents赋CGImage类型的值，否则得到的将是一片空白。 但是我们并不能直接给contents赋值，Core Foundation和Cocoa的类型不能够兼容

对于iOS初学者，本人不建议直接来看，如果项目都不会创建的话就没必要看了，多余的步骤我这里不再重复： 打开Xcode，创建好一个工程，我们先来创建一个CALayer，但是在Xcode标准库里面没有CALayer的库，这里我们要手动添加QuartzCore框架到Build Phases里面，然后在VC中引入头文件 #import CALayer ＊blueLayer＝[CALayer Laye

在学习之前，首先我们要了解CoreAnimation的核心是什么，不管是动画也好，视频也好，承载体其实都是一个平面，一个层级，这里要说的是图层和视图。这个很容易理解，我们所见到的Label，View等等，能展示出来的平面层都是由UIView延伸出来的，都是视图的范畴，而视图只是表面的展示，内部的图形处理都是基于图层的。而我们实际操作则是由苹果的开发人员对底层图层进行了复杂的封装，从而简化了我们的操作