不用指定大小，_pieLayer = [CAShapeLayer layer]; 绘制三个 彩色的扇形CAShapeLayer 并加载在 _pieLayer 上。...绘制一个 遮盖住 这三个 CAShapeLayer 的 CAShapeLayer 并赋值给 _pieLayer.mask ,我们都知道 maskLayer的颜色是不会印象视图的显示的，视图的显示只跟maskLayer...如果想达到下面的效果，就需要改变setImageEdgeInsets、setTitleEdgeInsets设置即可。 ?...image.png 9 渐渐消失的效果 iOS有私有iPA可以实现这样的效果，不过有可能被拒绝，还是使用UIKit动画比较稳 [UIView beginAnimations:nil context:nil...image.png label.adjustsFontSizeToFitWidth = YES; 期待的效果是，设置一个Label的Frame，让字体自动调整大小，可是这个方法最大设置的字体17.
Speed 默认的值为 1.0.这意味着动画播放按照默认的速度。如果你改变这个值为 2.0,动画会用 2 倍的速度播放。 这样的影响就是使持续时间减半。...如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟。 BeginTime 这个属性在组动画中很有用。它根据父动画组的持续时间,指定了开始播放动画的时间。...默认的是 0.0.组 TimeOffset 如果一个时间偏移量是被设定,动画不会真正的可见,直到根据父动画组中的执行时间得到的时间都流逝了。...现在要实现下图的效果 具体代码如下 func initKeyframeAnimation(){ //首先创建一个组动画，也就是大小变化和透明度变化的动画。...，如果对CAShapeLayer比较陌生，简单介绍下CAShapeLayer let layer: CAShapeLayer = CAShapeLayer() //创建贝塞尔曲线路径（CAShapeLayer
3、图片裁剪 为了减少图片资源的大小，有时候会把多个帧动画做成连续的一张图。这时需要程序加载一整张资源图，并在相应的位置进行裁剪。...1、视图变暗、变大 alpha值属性是透明度，把背景设置成淡黑色，然后调整alpha可以达到背景渐变的视图效果； UIView的transform是可以用仿射变换矩阵来控制平移、放大缩小等。...出现、烟花爆炸、画卷打开等效果，通过改变遮罩的大小，影响原始图片的展示，达到动画的效果； 先新建一个CAShapeLayer，并设置为layer的遮罩； 新建一个动画，设定初始和结束状态并赋值给CAShapeLayer...UIImageView的帧动画没有回调，如果需要实现达到第几帧之后，开始另外的动画的效果，需要用第一种方法。...天使动画的图片大小为900KB，运行时占内存15MB，播放完毕后，如果收到内存不足的警告会释放内存； 烟花动画的图片大小为400KB，运行时占用的内存为20MB，播放完毕后，会马上释放内存； 思考题?
我们同样可以跟新建view一样新建一个layer，然后添加到某个已有的layer上，同样可以对layer调整大小、位置、透明度等。...尾部所占整个路径的百分比位置，strokeEnd 需要大于 strokeStart，控制这俩值的大小，结合CABasicAnimation 即可实现 CAShapeLayer的绘图动画。...CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果 我们可以使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形...LineWidth 是在边界上绘制的宽度，而且 绘制的宽度被边界一分为二。 #如果LineWidth 为0 ，strokeColor设置后也是没有效果的。...数组类型),把需要同时运行的动画加到这个数组里. addAnimation:forKey 这个方法的forKey参数是一个字符串,这个字符串可以随意设 如果你需要在动画group执行结束后保存动画效果的话
CADisplayLink可以确保系统渲染每一帧的时候我们的方法都被调用，从而保证了动画的流畅性....CADisplayLink 默认每秒运行60次，将它的frameInterval属性设置为2，意味CADisplayLink每隔一帧运行一次，变为每秒运行30次, 使用场合相对专一，适合做UI的不停重绘...，比如自定义动画引擎或者视频播放的渲染。...设置两个图层的大小相同，高度都是一个浪的高度 在定时器的绑定方法中 使用 正弦曲线函数和for 方法绘制路径 把绘制好的路径分别赋给两个图层。 设定好“船”的 y坐标。...随着定时器的每次调用就会出现想要的波浪效果。 dome效果如下： ? 舟行碧波上.gif
**triangles**（如果是有动画，还需计算动画layer的属性的中间值）。...尽管这实现起来非常麻烦，但其带来的优势也非常大，CoreText对象创建好后，能直接获取文本的宽高等信息，避免了多次计算（调整 UILabel 大小时算一遍、UILabel 绘制时内部再算一遍）；CoreText...\* CAShapeLayer不会出现像素化，通过矢量图绘制而不是bitmap \* CAShapeLayer有很多属性可以方便的做动画，比如使用strokeStart和strokeEnd可以做出了很漂亮的动画...如果UIImage大小和UIImageview的size不同的话，CPU需要提前预处理，这是一项十分消耗CPU的工作，特别是在一些缩略图的场景下，如果使用了十分大的图片，不仅会带来很大的CPU性能问题，...所以，尽量不要让图片和视图的大小超过这个值。 * **视图的混合 (Composing)** 当多个视图（或者说 CALayer）重叠在一起显示时，GPU 会首先把他们混合到一起。
最后需要完成的效果： 首先要做的就是用CAShapeLayer画一个圆。...percentageLabel为视图的子view，设置好label的frame，并将其放在视图中心。...时间为1秒的动画,并将其autoreverses设为true，这样放大后会自动缩放到原来的大小,最后将重复次数设为无限大。...这样已经十分接近想要的效果了，但是还有一个很严重的bug就是当切换到主屏幕在回来的时候，动画就失效了。...这就需要去监听回到前台的状态，如果收到通知就做相对应的处理。 添加通知的观察者，并添加响应方法。
如果我们想依照此图形来剪裁视图内容，我们可以把CAShapeLayer作为视图的宿主图层，而不是添加一个子视图（图层蒙板的详细解释见第四章『视觉效果』）。...locations数组并不是强制要求的，但是如果你给它赋值了就一定要确保locations的数组大小和colors数组大小一定要相同，否则你将会得到一个空白的渐变。...原因在于动画以一个恒定的步调在运行。当在每个动画之间过渡的时候并没有减速，这就产生了一个略微奇怪的效果，为了让动画看起来更自然，我们需要调整一下缓冲，第十章将会详细说明。...如果我们把这个截屏视图置于原始视图之上，就可以遮住真实视图的所有变化，于是重新创建了一个简单的过渡效果。 清单8.14演示了一个基本的实现。...因为在动画添加到图层之后不能再做修改了，我们来通过调整layer的timeOffset达到同样的效果。
同时对横竖方向的CAShapeLayer做动画，就会出现如图所示的效果。...很多UIView）刚开始的是不显示的，加载在当前的UIView上，计算每一个点的动画开始时间，达到小圆点依次作动画的效果。...渐变区域的动画 我们仔细观察上图会发现，渐变区域的动画是这样的，先慢慢变清晰，同时波浪往上移动的效果，它是怎样实现的呢？...(3) 开始弹性动画，设置子视图的终点，X坐标跟曲线上点的X坐标一样，Y坐标的值跟曲线上点的Y坐标一样。 ，在 completion 中对 CADisplayLink定时器暂停。...(4) 在弹性动画的执行期间，定时器会不断的获取某一时刻的所有的子视图的 坐标 ，并修改 曲线上的点的位置的坐标，并根据 currentLinePathForWave 这个方法绘制出 渐变图层的 mask
可与上面两个属性组合出不同效果。 timingFunction 动画的运动是匀速线性的还是先快后慢等，类似UIView动画的opitions。...先看示例代码，动画效果是视图一边向上移动，一边绕Y轴旋转： ?...endAngle clockwise:(BOOL)clockwise // 绘制圆形曲线 - (void)appendPath:(UIBezierPath *)bezierPath; // 拼接曲线 如果将路径显示的图案显示到视图上呢...有三种方式：1、直接使用UIBezierPath的方法；2、使用CoreGraphics绘制；3、利用CAShapeLayer绘制。 示例代码如下，绘制一个右侧为弧型的视图： ?...进度条.gif 上图这样的视图是用UIBezierPath用多个CAShapeLayer制作出来的，而动画效果只需要改变进度的layer的strokeEnd和修改下面代表水面进度的视图位置即可。
前言 有时你会看到很多镂空的试图或者是镂空视图的动画效果，感觉很酷炫，其实只要掌握其中实现的原理，想实现怎样的效果就能实现怎样的镂空效果。 原理解析 UIView的maskView属性。...通过控制UIView的maskView、CALayer的mask有效区域，都可以修改UIView和 UIView的layer的显示外形，从而得到镂空或者其他的奇特形状及其动画。...使用图片作为mask可以直接获得需要显示的外形，需要注意的是这样的图片中需要展示的区域必须有像素，不需要显示的地方不可以有像素为空白，才能出效果，而且有像素的区域的透明度也会影响到最终的效果。...使用自定义形状的CAShapeLayer作为mask也可以达到使图层显示出镂空的效果。同样的，图层显示出来的区域是 CAShapeLayer的外形。...，其中水波的上升效果是通过核心动画和 CAShapeLayer的path动态绘制实现的，先了解更多的可以看我的其他两篇文章： 绘图－视图遮罩MaskView的使用 绘图－类似百度外卖波浪效果的实现与关键点解析
---- 在UIView中有一个maskView属性，我们可以利用这个属性很方便的做出一些有意思的效果 这个属性在iOS8之后开始使用，用来表示视图的遮罩。 ?...效果.png 这个效果的实现关键点在于 动画执行时间的延迟设置，这个时间的计算和设置，直接决定效果能否缓缓出来，因为代码的执行速度是很快的，而动画又是移步执行的，如果设置动画的执行时间为0，你会看到图片瞬间改变...如果兼容低版本，用maskLayer替换。...滑动.gif 此处只做思路的介绍，查看具体源码可以参看这篇文章： http://www.jianshu.com/p/f0c198e8de91 当然也可以结合CAShapeLayer用来实现自己想要的任意效果...- (void)dwMakeForEveryView { CGSize size = self.frame.size; CAShapeLayer *shapeLayer = [CAShapeLayer
这个数组中的元素是NSNumber类型，单调递增的，并且在0——1之间 例如，如果我们设置两个颜色进行过渡，这个数组中写入0.5，则第一个颜色会在达到layer一半的时候开始向第二个颜色过渡 */ @... iOS中只支持一种默认的kCAGradientLayerAxial，我们无需手动设置 */ @property(copy) NSString *type; 用如下代码创建一个度过视图的效果： ...层进行动画的时候，拷贝的副本执行动画的延时 @property CFTimeInterval instanceDelay; //拷贝副本的3D变换 @property CATransform3D instanceTransform...CGColor; //每个副本向右平移25px reLayer.instanceTransform=CATransform3DMakeTranslation(25, 0, 0); //如果进行动画...四、CAShapeLayer CAShapeLayer是图形layer层，我们可以自定义这个层的形状。
]; 会触发drawRect 方法达到刷新视图的效果。...，由于定时器的持续执行刷新，就出现了，文字跳动累加的效果。...# 其实直接在这里 修改一个全局 label 的值效果是一样的。...就是图中我们看到的橘红色 CAShapeLayer的fillColor 填充的是 贝塞尔曲线的有效区域 半径为 138的圆 shapeLayer11.fillColor=[UIColor colorWithRed...的终点，这里设置为动画的 KEY CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
通过它，我们可以轻松创建出炫酷的粒子效果。 2.CAGradientLayer CAGradientLayer可以创建出色彩渐变的图层效果，如下： ?...6.CAShapeLayer CAShapeLayer可以让我们在layer层是直接绘制出自定义的形状。 7.CATextLayer CATextLayer可以通过字符串进行文字的绘制。...三、设置与调整Layer层的内容 设置层的内容有下面三种方式： 1.可以通过设置CGImage为layer的内容。 2.可以通过代理方法来动态修改或者绘制层的内容。...当你设置了Layer的内容后，例如设置了一张图片，内容的尺寸不一定会刚好和layer的尺寸合适，我们可以对其位置的调整，使其达到我们想要的效果，contentsGravity属性决定了内容对齐与填充方式...，它可以分为两个方面： 1.不改变内容的原始大小 这种模式中不会改变内容的原始大小，如果层的尺寸小于内容的尺寸，则内容会被切割，如果层的尺寸大于内容的尺寸，多出的部分将会显示层的背景颜色。
如果不设置则根据坐标原点设置以及视图的尺寸自动确定，因为坐标轴是一个无穷大的区域，因此我们必须要限制这个区域的大小才能映射到真实的视图矩形区域中去。...得到路径布局中某个子视图的位置的自变量。 使用路径布局的目的是我们可以建立一些酷炫的布局效果，如果我们能够附加一些动画效果的话，那结果就更加美观了。...既然路径布局是子视图沿着曲线点来布局的，那如果我们能够取得这些曲线点的信息的话，就可以用他来构建一些关键帧动画KeyFrame Animation或者Core Animation中的一些特效。...就上面的例子来说，他所表示的就是某个子视图在圆上的角度。因此我们可以通过这个返回值来做一些子视图角度旋转的坐标变换(通过视图的transform属性来实现)。或者角度变化动画效果等。 3....获取两个子视图之间的路径坐标点信息。 有时候我们需要得到布局视图里面两个子视图之间的所有曲线路径点坐标，这样我们可以很方便的做一些帧动画来实现一些特殊效果。
• 单位 —— 对于与图片大小或是图层边界相关的显示，单位坐标是一个方便的度量方式， 当大小改变的时候，也不需要再次调整。...，还有效地提高了载入性能(单张大图比多张小图载入地更快)，但是如果有手动安排的话，他们还是有一些不方便的，如果你需要在一个已经创建好的品和图上做一些尺寸上的修改或者其他变动，无疑是比较麻烦的。 ...如果想让立方体看起来更加真实，需要自己做一个阴影效果。你可以通过改变每个面的背景颜色或者直接用带光亮效果的图片来调整。 ...如果我们想依照此图形来剪裁视图内容，我们可以把CAShapeLayer作为视图的宿主图层，而不是添加一个子视图(图层蒙板的详细解释见第四章『视觉效果』)。...我们真正想要的是一个用CATextLayer作为宿主图层的UILabel子类，这样就可以随着视图自动调整大小而且也没有冗余的寄宿图啦。
iOS中有一些特殊的layer，也可以做一些动画效果，本文就补充两个可以做动画效果的layer: CAEmitterLayer 和 CAReplicatorLayer。...CAEmitterLayer Emitter 发射器，因为可以用它来做爆炸、发射、下雪等效果。 比如，这个下雪效果： ?...:@"emitterCells.explosion.birthRate"]; } CAReplicatorLayer CAReplicatorLayer 可以多次拷贝某个layer，然后重新布局，实现动画效果...多个视图绕Y轴旋转，可以做loading效果： ?...，类似QQ语音通话和支付宝的咻咻咻 ?
就想着自己也来玩一下，顺便把之前没写成的 Custom ViewController Transition 自定义视图控制器过渡的文章也一起搞定了。...这里只以这个动画的实现为主线，更系统的介绍请移步上面的相关链接。 视图控制器过渡，就是指图片里那种 ViewController 的过渡效果。（好废话。。。）...可以用手势控制过渡动画的进度，还可以中途取消手势。这个也不会提到。。。...有两个方法需要实现 // 这个方法负责做真正的动画，输入参数是过渡的上下文，从哪个VC过渡到哪个VC这些东西都可以从它得到。...，主要的想法是设定一个 CAShapeLayer 作为目标 VC 的遮罩。
俺写一篇分享文章大约要4～6个小时，大体是三部分：想到合适的例子，敲代码写注释，写文章。通常都会看自己当前的情况，决定是先写swift版还是OC版，然后不动脑子的翻译成另外一版调整一下BUG。...创建步骤： 创建关键帧动画对象 设置属性 添加到要作用的layer上 如果使用rect椭圆的方式，动画会不连贯，停顿一下。...我们试着做一个包行旋转、缩放、按一定弧度路径组合在一起的动画。效果如下： ?...设置了三个关键帧动画的大小，以及这三个关键帧的运动节奏。 然后，就好啦～然后，就好啦～然后，就好啦～然后，就好啦～ 哪尼？！！！就这样？！！对啊，就这样。...因为在工作中碰到的大部分动画都是通过UIView的动画block实现，其他都基本上都是需要用到CAShapeLayer。我们下次玩点好玩的吧～ 如果还有兴趣，可以看看本系列的其他文章哈。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
