CAShapeLayer动画问题 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

绘图-CAShapeLayer、CABasicAnimation以及核心动画

CAShapeLayer CAShapeLayer顾名思义，继承于CALayer。每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。...CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果我们可以使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形...大致步骤如下： 1、新建UIBezierPath对象bezierPath 2、新建CAShapeLayer对象caShapeLayer 3、将bezierPath的CGPath赋值给caShapeLayer...的path，即caShapeLayer.path = bezierPath.CGPath 4、把caShapeLayer添加到某个显示该图形的layer中 #值得注意的是，CAShapeLayer...关于核心动画里面的时间暂停，继续的问题可以看我另一篇文章：实践－跑马灯效果及实现过程解析 CASpringAnimation 带有初始速度以及阻尼指数等物理参数的属性动画。

3.6K3 0

iOS动画系列之八：使用CAShapeLayer绘画动态流量图1. CAShapeLayer2. 实战：绘制一个镂空图层动画3. 使用CAShapeLayer绘画动态流量图

这篇文章通过使用CAShapeLayer和UIBezierPath来画出一个动态显示剩余流量的小动画。...CAShapeLayer 实际中，能够用CALayer完成的任务是比较少的，如果使用这个基础图层就能实现绝大部分的功能，咱们就没有必要再开启一个CAShapeLayer了嘛。...1.1 CAShapeLayer的优点那CAShapeLayer到底有啥子优点嘛！ CAShapeLayer作为继承自CALayer的子类，当然可使用CALayer的所有属性。...1.2 基本属性属性名作用 path 图像的绘制路径，path不支持隐式动画 fillColor 填充path的颜色，或无填充。默认为不透明黑色。 fillRule 填充path的规则。...实战：绘制一个镂空图层动画做好后的效果如下： Paste_Image.png fileprivate func hollowLayer(){ // 创建空心的layer

2.1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

使用CAShapeLayer绘图

CAShapeLayer *myShapeLayer = ({ //初始化一个实例对象 CAShapeLayer *circle = [CAShapeLayer...下面我们再使用CAShapeLayer绘制一些特殊的形状 ?...self.end; if (self.end == 1) { [self.displayLink invalidate]; } } @end 我们再来看看这个动画效果...思路是在绿色的CALayer上面放一个红色的CAShapeLayer, 然后逐渐增加CAShapeLayer的填色大小上代码: #import "ViewController.h" static CGFloat...2, 45)].CGPath; if (count > 60 * 10 -1) { [self.displayLink invalidate]; } } 这个动画稍微修改下是不是就可以用作进度指示器了呢

1.5K1 0

iOS CAShapeLayer和UIBezierPath的使用

1.CAShapeLayer简介 CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。...CAShapeLayer继承自CALayer，可以使用CALayer的所有属性值。 CAShapeLayer需要与贝塞尔曲线配合使用才有意义（这是个人经验）。...使用CAShapeLayer与贝塞尔曲线可以画出你想要的图形。相对于Core Graphics绘制图片，使用CAShapeLayer有以下一些优点: 渲染快速。...五角星动画 - (void)createUI2 { // 创建shapeLayer _shapeLayer = [CAShapeLayer layer]; _shapeLayer.frame...target:self selector:@selector(bezierPathAnimation) userInfo:nil repeats:YES]; } /// 执行bezierPath的动画

2.3K3 0

老司机带你走进Core Animation 之CAShapeLayer和CATextLayer

Animation 之CADisplayLink 老司机带你走进Core Animation 之几种动画的简单应用老司机带你走进Core Animation 之CAShapeLayer和CATextLayer...真不是，这次说他主要是想表达这个属性是默认支持隐式动画的。隐式动画就是不用显示声明，系统默认为我们实现的动画。...我会在文章的最后放出如何才能解决你们遇到的问题，别着急往下拉哦。（你要是没遇到问题，老司机再教你一个快捷键，command + A，然后按delete键可以快速整理代码）。...问题就是当你第一循环结束后你想把你的strokeEnd恢复成0你却发现他是以动画形式恢复回去的不是你要的效果对吧？这就是因为他的隐式动画了。因为这时候我们不需要他的动画是吧？...知道原因就好办了，我们可以通过 CATransaction显式的关闭他的动画，恢复成0，再打开动画，是不是就行了？哈哈哈，就是这么简单。

1.8K2 0

绘图- 镂空效果及其动画实现解析

前言有时你会看到很多镂空的试图或者是镂空视图的动画效果，感觉很酷炫，其实只要掌握其中实现的原理，想实现怎样的效果就能实现怎样的镂空效果。原理解析 UIView的maskView属性。...通过控制UIView的maskView、CALayer的mask有效区域，都可以修改UIView和 UIView的layer的显示外形，从而得到镂空或者其他的奇特形状及其动画。...使用自定义形状的CAShapeLayer作为mask也可以达到使图层显示出镂空的效果。同样的，图层显示出来的区域是 CAShapeLayer的外形。...CGImage; self.waveView.layer.mask = maskLayer; 使用了图片作为遮罩图层，self.waveView为一个水波上涨的自定义试图，其中水波的上升效果是通过核心动画和...blue.png ---- 小结有问题可以留言交流哦。

2.5K2 0

iOS Core Animation的用法

，如果对CAShapeLayer比较陌生，简单介绍下CAShapeLayer let layer: CAShapeLayer = CAShapeLayer() //创建贝塞尔曲线路径（CAShapeLayer...你指定诸如颜色和线宽等属性，用CGPath来定义想要绘制的图形，最后CAShapeLayer就自动渲染出来了。...当然，你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径，相比直下，使用CAShapeLayer有以下一些优点：渲染快速。...CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。高效使用内存。...当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。源代码地址上面说的所有动画源代码地址

1.8K3 0

Swift动画 —— 进度条

最后需要完成的效果：首先要做的就是用CAShapeLayer画一个圆。...这里有个问题就是开始的位置应该是圆的上方而不是右边，这里就需要去修改shapeLayer的transform,这样就会从圆的上方开始动画了。...shapeLayer.transform = CATransform3DMakeRotation(-CGFloat.pi / 2, 0, 0, 1) （滑动显示更多）这里还有个问题就是圆圈的头是直线而不是圆形的...时间为1秒的动画,并将其autoreverses设为true，这样放大后会自动缩放到原来的大小,最后将重复次数设为无限大。...这样已经十分接近想要的效果了，但是还有一个很严重的bug就是当切换到主屏幕在回来的时候，动画就失效了。

3.1K1 0

swift 写 iOS 空心字描边动画

参考资料 http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer/ https://github.com/ole...动画预览 ? 开始扯上篇写了 iOS 的 block-based animation 这一篇再来整点更加有趣的玩意。效果就是上面那个 GIF 了，虽然实在想不到有谁会需要在程序里手写这种动画。。。...前置技能，至少都加 1 点： CAShapeLayer 。...：实现 CAPathLayer 的 strokeEnd 从0到1动画把上文中 CAPathLayer 的 path 属性换成文字的轮廓 path 第一步，也就是动画的部分：新建一个 Single View...（看不到或看不全的话， shapeLayer 的 frame 可能要调一调）还有个问题，文字全部倒过来了。。。。。。。。。。

2.1K3 1

绘图－类似百度外卖波浪效果的实现与关键点解析

CADisplayLink可以确保系统渲染每一帧的时候我们的方法都被调用，从而保证了动画的流畅性....CADisplayLink 默认每秒运行60次，将它的frameInterval属性设置为2，意味CADisplayLink每隔一帧运行一次，变为每秒运行30次, 使用场合相对专一，适合做UI的不停重绘，比如自定义动画引擎或者视频播放的渲染...选择CAShapeLayer 的原因：渲染效率高渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。高效使用内存。...一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。...当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。

8033 0

绘图-几个较复杂统计图案例的实现分析

下面逐个分析坐标横竖虚线的动画第一步设置一个 CAShapeLayer 并设置 .lineDashPattern 属性，使之成为虚线。...后，直接对 CAShapeLayer的strokeEnd 作CABasicAnimation动画，就会出现，三条横线依次出现的动画，很巧妙，而不是你看到的初始化三条UIBezierPath。...同时对横竖方向的CAShapeLayer做动画，就会出现如图所示的效果。...最后对CAShapeLayer的strokeEnd 作CABasicAnimation动画即可实现。...至于均线就是一个点一个点连接起来的，同样可以通过线段画出来，这里就不多说了，还有一个十字线，这个只要会画线段就会画十字线，这个也不多说了；这些掌握了之后就可以绘制专属自己的Ｋ线图了，其他的都是一些细节小问题

1.8K2 0

绘图－圆环进度条实现详解

[timer invalidate]; timer = nil; } return; } else { #进度条动画...if (_animationModel == CircleIncreaseSameTime) { fakeProgress += 0.01*(_progress);//不同进度动画时间基本相同...} else { fakeProgress += 0.01;//进度越大动画时间越长。...} } 使用 CAShapeLayer 和 CABasicAnimation 实现环形进度动图进度.gif 核心源码 # 橘红色的背景 CAShapeLayer *shapeLayer11...的终点，这里设置为动画的 KEY CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

2.6K3 0

绘图-几种基本统计图的实现分析

使用CAShapeLayer 和 UIBezierPath，可以实现动态绘制的动画效果。...初始化 UIBezierPath 供CAShapeLayer 使用；使用 for循环再绘制余下的每一个圆点，确保每一个圆点都在 CAShapeLayer 的上层，同时对UIBezierPath...使用CABasicAnimation 利用layer 的strokeEnd属性动态绘制，不使用动画时，会直接一下绘制完成。...UUBar中使用CAShapeLayer 、UIBezierPath、CABasicAnimation可实现动态柱状图 CAShapeLayer设置 _chartLine.fillColor =...chartLine.strokeColor = [_barColor CGColor]; }else{ _chartLine.strokeColor = [UUGreen CGColor]; } 动画设置

1.8K1 0

【H5动画】谈谈canvas动画的闪烁问题

一般来说，在H5开发中，使用canvas往往只是为了展示一些简单的图表或者简单短小的动画，很少考虑到有闪烁的问题。最近，在手机QQ魔法表情的项目中，就遇到了奇葩的闪烁问题。...闪烁分析这个魔法表情，实际是html5版本的动画，使用Fanvas（即将腾讯开源），从swf转化为canvas 2d动画。...来看看百度百科的说明，可能没有wikipedia专业，但我觉得足够解释问题了。闪烁是图形编程的一个常见问题。需要多重复杂绘制操作的图形操作会导致呈现的图像闪烁或具有其他不可接受的外观。...双缓冲的使用解决这些问题。双缓冲使用内存缓冲区来解决由多重绘制操作造成的闪烁问题。当启用双缓冲时，所有绘制操作首先呈现到内存缓冲区，而不是屏幕上的绘图图面。...回到我们的动画中，发现异曲同工，闪烁、掉帧的问题根源就是因为部分机型下没有自动实现cnavas的双缓冲（一般这些都是底层实现的），而canvas每一帧动画过程又比较漫长，擦除上一帧动画后，要过几十毫秒才能绘制完成下一帧

4.1K3 0

iOS动画（补充）--特殊Layer动画

iOS中有一些特殊的layer，也可以做一些动画效果，本文就补充两个可以做动画效果的layer: CAEmitterLayer 和 CAReplicatorLayer。...:@"emitterCells.explosion.birthRate"]; } CAReplicatorLayer CAReplicatorLayer 可以多次拷贝某个layer，然后重新布局，实现动画效果...*shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = CGRectMake(0, (width - dotW) * 0.5, dotW,...*pulseLayer = [CAShapeLayer layer]; pulseLayer.frame = self.layer.bounds; pulseLayer.path =...self.layer addSublayer:replicatorLayerY]; // [self.layer addSublayer:replicatorLayerX]; //添加动画

1.1K3 2

直播APP常用动画效果

介绍记录、总结开发遇到一些问题，大家一起交流学习。这次带来，对直播APP的常用动画总结。直播Live 效果展示下面是一个很多平台都有的入门豪华礼物动画——烟花。...一个复杂的礼物动画，首先是美术给出gif实现草图和素材，技术进行动画剖析和图片压缩，在程序中加载图片和实现动画，其中要注意内存和CPU占用。 ?...出现、烟花爆炸、画卷打开等效果，通过改变遮罩的大小，影响原始图片的展示，达到动画的效果；先新建一个CAShapeLayer，并设置为layer的遮罩；新建一个动画，设定初始和结束状态并赋值给CAShapeLayer...bounds))]; UIBezierPath *maskFinalPath = [UIBezierPath bezierPathWithRect:rainbowView1.bounds]; CAShapeLayer...*maskLayer = [CAShapeLayer layer]; rainbowView1.layer.mask = maskLayer; maskLayer.path = maskFinalPath.CGPath

2.3K8 0

iOS开发CoreAnimation解读之三——几种常用Layer的使用解析

property NSInteger instanceCount; //是否开启景深效果 @property BOOL preservesDepth; //当CAReplicatorLayer的子Layer层进行动画的时候...，拷贝的副本执行动画的延时 @property CFTimeInterval instanceDelay; //拷贝副本的3D变换 @property CATransform3D instanceTransform... //每个副本向右平移25px reLayer.instanceTransform=CATransform3DMakeTranslation(25, 0, 0); //如果进行动画...四、CAShapeLayer CAShapeLayer是图形layer层，我们可以自定义这个层的形状。...： CAShapeLayer * layer = [CAShapeLayer layer]; layer.position=CGPointMake(0,0); CGMutablePathRef

8742 0

画线动画、平滑过渡曲线

一、动画画线 1、创建CAShaperLayer //创建出CAShapeLayer _shapeLayer = [CAShapeLayer layer]; _shapeLayer.frame...pointValue CGPointValue]]; }]; path.usesEvenOddFillRule = YES; 4、添加动画...//创建动画 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector...strokeEnd))]; animation.fromValue = @0.0; animation.toValue = @1.0; animation.duration = 2;//动画时间

1.6K2 0

iOS实践：通过核心动画完成过山车1. 思路和所用到的内容2. 辅助元素的创建（背景颜色、草坪、大地、小树、云彩）3. 雪山的实现4. 轨道的实现

之前在一个网站上看到了一个HTML5/SVG实现的过山车动画，点这里看网页版。觉得很棒，想想咱们iOS也完全可以实现，正好还可以全面回顾一下之前分享过的关于iOS中间动画系列会使用到的各个内容。...过山车思维导图.png 1.2 所用到的知识在这里，我们使用到了： CALayer、CAShapeLayer、CAGradientLayer三种layer。...几乎绝大部分的内容都在iOS动画系列这个里面。 1.3 最耗费时间的地方特别想拿出来说说这个最耗费时间的东东。想都不用想，当然是火车轨道比较麻烦啦。...哈哈～ CAGradientLayer的基础部分可以看看这个文章，第九篇：iOS动画系列之九：实现点赞的动画及播放起伏指示器。 2.2 草坪主要是使用两个二次贝塞尔曲线实现的。...二次贝塞尔曲线.png 2.3 云彩动画的实现云彩的漂浮就是通过CAKeyframeAnimation，让其沿着绘画的直线曲线进行运动。

2K5 0

android平移动画闪烁问题

当我们应用android平移动画时,一般会给动画一个监听,当动画结束时,会将view的位置重新绘制到我们想要的位置,因为平移动画并没与真的改变控件的实际位置....public void onAnimationEnd(Animation animation) { //动画结束后更新...animation.setDuration(1); mTopView.startAnimation(animation); //动画结束后更新...}); mTopView.startAnimation(animation); 在实际写的时候,偶然发现另一种方式也是有效的,不过这种有点违反直觉,就是倒着写动画

2.5K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭