一、动画画线 1、创建CAShaperLayer //创建出CAShapeLayer _shapeLayer = [CAShapeLayer layer]; _shapeLayer.frame...= self.view.bounds;//设置shapeLayer的尺寸和位置 _shapeLayer.position = self.view.center; _shapeLayer.fillColor...= [UIColor clearColor].CGColor;//填充颜色为ClearColor 2、定义线条 //设置线条的宽度和颜色 _shapeLayer.lineWidth =...*path = [[UIBezierPath alloc] init]; [path moveToPoint:[[array firstObject] CGPointValue]];...* aPath = [UIBezierPath bezierPath]; aPath.lineWidth = 5.0; aPath.lineCapStyle = kCGLineCapRound
kCAFillRuleEvenOdd; [self.view.layer addSublayer:layer]; 可以看到，事实上老司机叠加了两条路径，一个圆角矩形一个圆形，然而这还并不够，因为layer还要知道自己的填充判断规则...这个属性是用来判断某一点是否在填充区域内的判断规则。 他有两个枚举值，kCAFillRuleNonZero和kCAFillRuleEvenOdd。...真不是，这次说他主要是想表达这个属性是默认支持隐式动画的。 隐式动画就是不用显示声明，系统默认为我们实现的动画。...这个属性指的是实线与虚线长度交替的数组。注意奇数位为实线，偶数位为虚线，单位像素。系统会按照给定数组自动重复设置虚线。 lineDashPhase这个属性是告诉系统从多少开始计算这个距离。...这就是因为他的隐式动画了。因为这时候我们不需要他的动画是吧？知道原因就好办了，我们可以通过 CATransaction显式的关闭他的动画，恢复成0，再打开动画，是不是就行了？哈哈哈，就是这么简单。
使用CAShapeLayer 和 UIBezierPath，可以实现动态绘制的动画效果。...初始化 UIBezierPath 供CAShapeLayer 使用； 使用 for循环再绘制余下的每一个圆点，确保每一个圆点都在 CAShapeLayer 的上层， 同时对UIBezierPath...使用CABasicAnimation 利用layer 的strokeEnd属性动态绘制，不使用动画时，会直接一下绘制完成。...如果需要设置字体排版（如居中）** NSMutableParagraphStyle * paragraph = [[NSMutableParagraphStyle alloc]init]; paragraph.alignment...使用UIBezierPath绘制扇形 在我这篇文章中我说过：UIBezierPath是在 UIKit 中的一个类，继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics
//画背景线、填充线、小圆点、文字 - (void)drawRect:(CGRect)rect { [super drawRect:rect]; #获取图形上下文...} else { fakeProgress += 0.01;//进度越大动画时间越长。...=[CAShapeLayer layer]; UIBezierPath*path12=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(89, 299,...就是图中我们看到的橘红色 CAShapeLayer的fillColor 填充的是 贝塞尔曲线的有效区域 半径为 138的圆 shapeLayer11.fillColor=[UIColor colorWithRed...，这里设置为动画的 KEY CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; pathAnima.duration
CAShapeLayer有着几点很重要: 它依附于一个给定的path,必须给与path,而且,即使path不完整也会自动首尾相接 strokeStart以及strokeEnd代表着在这个path中首部、...CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果 我们可以使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形...在初始化的时候可以不指定 Frame，其位置和形状由UIBezierPath决定。...#比如末端是矩形还是圆形，都是 UIBezierPath的设置，而且fillColor 也是 UIBezierPath区域内的颜色。...layer.strokeColor = [UIColor lightGrayColor].CGColor; __weak typeof(self) weakSelf = self; # 由代码可知，动画的先后执行时间顺序是通过
之前讲过使用UIBezierPath在UIView的drawRect中绘图， 今天我们讲下另外一种方式: CAShaperLayer 先说说使用CAShapeLayer的优点: GPU执行, GPU执行...按照之前的思路是创建一个UIView子类， 用UIBezierPath画一个外围的不闭合圆弧， 在画中间点圆 代码量不是很多弹也不少， 那假如用CAShapeLayer实现时怎么样子的呢？...redColor].CGColor; //设置划线颜色 circle.fillColor = [UIColor yellowColor].CGColor; //设置填充颜色...UIBezierPath生成一个path，然后取他的CGPath来获取路径的。...别不当回事，你错的时候就知道咋回事了? 另外，如下图所示，整个圆形UIBezierPath其实是分为多个子路径绘制的 strokeEnd 是轮廓终点的属性，取值范围[0,1]。
1.UIKit绘图 // 获取当前上下文 CGContextRef context = UIGraphicsGetCurrentContext(); // 移动画笔 CGContextMoveToPoint...删除 UIBezierPath 对象中的所有点, 效果也就等同于删除了所有子路经 - (void)removeAllPoints; 将指定 UIBezierPath 中的内容添加到当前 UIBezierPath...对象中 - (void)appendPath:(UIBezierPath *)bezierPath; //该方法将会在当前 UIBezierPath 对象的路径中追加 UIBezierPath的属性...phase:(CGFloat *)phase; -> // 重新获取虚线的模式 /** * 该方法当前的填充颜色 和 绘图属性对路径的封闭区域进行填充...*/ - (void)fill; /** * 该方法当前的填充颜色 和 绘图属性 (外加指定的混合模式 和 透明度) * 对路径的封闭区域进行填充.
现在的感觉就是胸口的一块大石头没有了，要去尽情的嗨皮！！！！ 之前在一个网站上看到了一个HTML5/SVG实现的过山车动画，点这里看网页版。...觉得很棒，想想咱们iOS也完全可以实现，正好还可以全面回顾一下之前分享过的关于iOS中间动画系列会使用到的各个内容。...注释写的还算比较详细啦，自我感觉。哈哈～ CAGradientLayer的基础部分可以看看这个文章，第九篇：iOS动画系列之九：实现点赞的动画及播放起伏指示器。...小树的Layer，我们通过设置contents进行了图片填充。...画完了之后，使用图片进行填充就完成了90%的工作。 为了让轨道看起来更好看一些，对轨道的边缘进行镂空，内部填充色变成透明。 4.1 绘画的步骤 1,先画最右边的弧线，一个二次贝塞尔曲线。 ?
M_PI * 2; // 根据进度计算扇形结束位置 CGFloat endAngle = M_PI *3.0/2.0; // 根据起始点、原点、半径绘制弧线 UIBezierPath...*sectorPath = [UIBezierPath bezierPathWithArcCenter:origin radius:radius startAngle:startAngle endAngle...这样系统会自动闭合图形，绘制一条从圆心到弧线起点的线段。...[sectorPath addLineToPoint:origin]; // 设置扇形的填充颜色 [[UIColor blackColor] set]; // 设置扇形的填充模式...[sectorPath fill]; } 2、数据下载完成后外围灰边框动画 画出默认的边框，并加载到uiview的layer层 - (CAShapeLayer *)borderLayer {
这篇文章通过使用CAShapeLayer和UIBezierPath来画出一个动态显示剩余流量的小动画。...1.2 基本属性 属性名 作用 path 图像的绘制路径，path不支持隐式动画 fillColor 填充path的颜色，或无填充。默认为不透明黑色。 fillRule 填充path的规则。...实战：绘制一个镂空图层动画 做好后的效果如下： Paste_Image.png fileprivate func hollowLayer(){ // 创建空心的layer...), cornerRadius: 5) // 中间镂空的圆形path let hollowPath = UIBezierPath.init(ovalIn: CGRect(x...hollowLayer.path = squarePath.cgPath hollowLayer.fillColor = UIColor.lightGray.cgColor // 设置路径的填充模式为两个图形的非交集
带动画渐进效果与颜色渐变的圆弧进度控件设计 今天帮朋友写了一个小巧的圆弧进度控件，控件十分简单，主要设计思路采用CAShapeLayer来创建控件圆弧形状，使用CAGradientLayer...来进行颜色渐变的渲染，两者结合来创建出颜色渐变的圆弧进度条控件，关于进度动画采用CoreAnimation动画处理。...控件进行了简洁的封装，提供了面向使用的接口，需要的朋友可以自取，Demo地址如下： http://pan.baidu.com/s/1gfqDbtp。 ...控件中主要提供了，改变进度条渐变颜色，圆弧进度条宽度，带动画效果的改变进度，改变进度百分比字体颜色等方法。效果是例如如下： ? 改变字体颜色 ? 改变进度 ? 改变进度条颜色 ?...:-M_PI_2 endAngle:M_PI_2*3 clockwise:YES]; _contentLayer.path = pathT.CGPath; //默认填充颜色为白色
这里写图片描述 因此，我们的动画要分两步： 提取颜色 做"覆盖"动画 4.1、提取颜色 在这里使用了一个框架CCColorCube，通过该框架，我们可以方便的提取图标的颜色。...，因此直接取第一个元素即为我们所需要的颜色 return colors.firstObject; } 4.2、覆盖动画 通过shapeLayer的动画，一开始先添加宽为“1”的线条，再设置动画，将线条的...forKey:@"bgColorAnimation"]; } - (CAShapeLayer *)bgColorlayer { if(_bgColorlayer == nil) { UIBezierPath...*path = [UIBezierPath bezierPath]; [path moveToPoint:self.bounds.origin]; [path addLineToPoint...CAShapeLayer *layer = [CAShapeLayer layer]; //* 设置路径 */ layer.path = path.CGPath; //* 设置填充色
我们创建一个UIBezierPath，让小飞机沿着这个路径运动。..."]; //设置属性：创建beziper路径，并把路径作为运动轨迹 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect...:nil]; 1.3 动画叠加 刚才添加了一个沿路径运动的飞机，我们同时还可以给飞机再把抖动的那个动画也添加上去。...CAAnimationGroup 单一的动画在实际中往往是不能满足需求的，这时就需要用到动画组。...maskAni.removedOnCompletion = NO; // 动画填充模式：kCAFillModeForwards:当动画结束后，layer会一直保持着动画最后的状态
1. iOS动画 总的来说，从涉及类的形式来看，iOS动画有：基于UIView的仿射形变动画，基于CAAnimation及其子类的动画，基于CG的动画。这篇文章着重总结前两种动画。 2....timingFunction：速度控制函数，控制动画运行的节奏 delegate：动画代理 3.4 几个重要属性值 removedOnCompletion属性值 CAAnimation——动画填充模式...*path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 200, 200, 200)]; //指定path的动画 UIBezierPath...组动画 6.1 组动画 上面单一动画的情况在实际开发中实际比较少，更多的时候是组合这些动画：创建不同类型的动画对象，设置好它们的参数，然后把这些动画对象存进数组，传进组动画对象的animations属性中去...贝塞尔曲线 前面关键帧动画章节提到了贝塞尔曲线，这个曲线很有用，在iOS开发中有两种形式可用：CGMutablePathRef和UIBezierPath，均可以通过制定控制点数组的形式唯一确定曲线，也可以通过矩形内切椭圆唯一确定曲线
下面这个是一个全屏类型的“天使”礼物动画，我们来剖析下这个动画的构成。...天使 时间轴实现 为了让动画按照时间顺序一一执行，可以把动画按时间和对象分成多个方法，通过GCD在指定的时间调用。...UIBezierPath *maskStartPath = [UIBezierPath bezierPathWithRect:CGRectMake(CGRectGetWidth(rainbowView1...的支持，实现帧动画。...UIImageView的帧动画没有回调，如果需要实现达到第几帧之后，开始另外的动画的效果，需要用第一种方法。
在大部分APP（尤其是社交类的，如qq）常常会有更换头像的场景：点击用户 载入头像，载入出系统图片，用户点击选中某张图片之后。能够对图片进行放缩和 拖动，已更改圆形裁剪框圈定的图片部分。...留意上图的动画，qq总是可以确保圆环全然被图片所覆盖，假设拖动 或者放缩使得图片以外的黑色区域进入了圆环。图片会自己主动弹回刚好可以全然覆盖 的状态。...还一条是圆 形的虚线裁剪框； 2.使用奇偶原则对这两条封闭曲线进行色彩填充。使得方框和圆形框之间的区域 填充（黑色。...//创建外围慷慨框UIBezierPath: UIBezierPath *bezierPathRect = [UIBezierPath bezierPathWithRect:rect]; /.../将圆形框path加入到慷慨框path上去，以便以下用奇偶填充法则进行区域填充： [bezierPathRect appendPath:pickingFieldPath]; //填充使用奇偶法则
:(DWContentMode)mode; ///按给定path剪裁图片 -(UIImage *)dw_ClipImageWithPath:(UIBezierPath *)path mode:(DWContentMode...)mode; ///获取旋转角度的图片 -(UIImage *)dw_RotateImageWithAngle:(CGFloat)angle; ///按给定的方向旋转图片 -(UIImage*)dw_RotateWithOrient...self.successAnimation) {///未指定动画使用默认动画 [self.layer addAnimation:defaultSuccessAnimaiton...self.failAnimation) {///未指定动画则使用默认动画 [self.thumbLayer addAnimation:defaultFailAnimation...* puzzlePath (){ UIBezierPath * path = [UIBezierPath bezierPathWithPathMaker:^(DWPathMaker *maker
->红的高亮(也就是多个半透明层的叠加，其中绿色代表比较好，红色则代表比较糟糕) 由于重绘的原因，混合对GPU(Graphics Processing Unit->专门用来画图的)性能会有影响，同时也是滑动或者动画帧率下降的罪魁祸首之一..., size: rect.size) view.addSubview(imageView02) } 自定义创建图像的方法 /// 将给定的图像进行拉伸,并且返回新的图像 /// ///...下面是方法的最终代码： /// 将给定的图像进行拉伸,并且返回新的图像 /// /// - Parameters: /// - image: 原图 /// - size: 目标尺寸 /// -...// 背景填充(在裁切之前做填充) backColor.setFill() UIRectFill(rect) 但黑线的原因暂时尚未查明。我之前的思路是按照做圆形头像的代码继续做的。...背景被填充的是黑色，在你的图形以外的范围内会被看见。
PS：一个layer设定了很多动画，他们都会同时执行，如何按顺序执行我到时候再讲。...假如你想要再次用这个动画时,你需要设定这个属性为 false。这样的话,下次你在通过-set 方法设定动画的属 性时,它将再次使用你的动画,而非默认的动画。...= UIBezierPath() //addArcWithCenter,顾名思义就是根据中心点画圆(OC语法的命名优越感又体现出来了0.0),这几个参数 /** center:...startAngle: 0, endAngle: CGFloat(2 * M_PI), clockwise: false); //线宽，如果画圆填充的话也可以不设置...layer.lineWidth = 2 //填充颜色，这里也就是圆的颜色 layer.fillColor = color.CGColor //图层背景色 layer.backgroundColor
需要说明的是CAGradientLayer只能实现矩形范围内的颜色渐变, 那渐变的圆环要如何实现呢? mask 对了 首先我们创建两个挨着的矩形渐变色块, 并把两个色块添加到同一个layer ?...ViewController - (void)viewDidLoad { [super viewDidLoad]; //创建圆弧路径 UIBezierPath *...path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:45 startAngle:- 7.0 / 6...; layer.lineCap = @"round"; layer.lineWidth = 10; return layer; } //依照给定的颜色数组创建并返回一个...来实现动画
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
