iOS 开发实用技术导航
NSHipster 中文版
http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
http://www.cocos2d-iphone.org/
CocoaPods
http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
http://code.google.com/mobile/analytics/
WWDC
https://developer.apple.com/wwdc/
Design Guides and Resources
https://developer.apple.com/design/
Transcripts of WWDC sessions
http://asciiwwdc.com
Cocoa with Love
http://cocoawithlove.com/
Cocoa Dev Central
http://cocoadevcentral.com/
NSHipster
http://nshipster.com/
Style Guides
Google Objective-C Style Guide
NYTimes Objective-C Style Guide
Useful Tools and Services
Charles Web Debugging Proxy
Smore
newkengsir
V2EX  ›  iDev

CAGradientLayer

  •  1
     
  •   newkengsir · Sep 22, 2016 · 2971 views
    This topic created in 3545 days ago, the information mentioned may be changed or developed.

    DEMO 地址下载

    假期遇上台风天停电 休息了好几天。

    今天大概说说 CAGradientLayer 的使用。

    CAGradientLayer 是用于处理渐变色的层结构,比如想设置一个背景色的一部分为蓝色,一部分为红色,这时候就可以使用 CAGradientLayer 来设置了。 CAGradientLayer 的渐变色和前面所使用的 CALayer 、 CAShapeLayer 一样都可以做隐式动画。 CAGradientLayer 与 CAShapeLayer 配合使用(CAShapeLayer 上一篇有讲解了), CAShapeLayer 提供一个形状, CAGradientLayer 提供一个渐变色的背景。其实就是把 CAShapeLayer 当作 CAGradientLayer 的 mask 属性(遮罩)来使用了。 CAGradientLayer 可以实现 png 图片遮罩无法实现的效果,而且更效率。

    另外, CAGradientLayer 有一个坐标系统,是从(0,0)到( 1,1 )绘制的矩形, CAGradientLayer 的 frame 不为正方形的话,坐标系统就会被拉伸。还有两个属性, startPoint 和 endPoint 的设置会影响颜色的绘制方向,即从上到下或者从左到右等,由坐标系统决定。 坐标系统.png

    画图还是那么差劲,能看懂就好 - - 比如 startPoint 是(0,0) endPoint 是( 0,1 )则颜色的绘制方向由左到右。其他的类推。 CAGradientLayer 的多种颜色的分割由 0->1 的比例决定不由它的 frame 决定。 颜色分割点.png

    代码部分

        @property (nonatomic, strong) CAGradientLayer *gradientLayer;
    
        //初始化
        self.gradientLayer = [CAGradientLayer layer];
        self.gradientLayer.frame = CGRectMake(0, 0, 200, 200);
        //laye 的 position 和 view 的 center 一样 居中属性
        self.gradientLayer.position = self.view.center;
        //边宽
        self.gradientLayer.borderWidth = 1.f;
        [self.view.layer addSublayer:self.gradientLayer];
    
        //设置颜色
        self.gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                                      (__bridge id)[UIColor greenColor].CGColor,
                                      (__bridge id)[UIColor blueColor].CGColor];
        
        //设置颜色渐变方向 (0,0)->(1,1)则 45 度方向 (0,0)->(1,0)上->下
        self.gradientLayer.startPoint = CGPointMake(0, 0);
        self.gradientLayer.endPoint = CGPointMake(0, 1);
        
        //设置颜色分割点
        self.gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];
    

    由于代码较多就不贴出来了,有需要下载的可以去

    下面是实现色差动画的效果

    下面这些效果我都整理了 放在 demo 中了,可以去这里下载这里就不一一贴出来了,注释也写的比较多,很容易理解。 先放一张截图的吧。运行时的效果。因为视频转成 gif 后不知道为什么变成很差的效果,可能是帧数吧。代码中运行时还是很不错的效果的。。。有大神知道原因的告诉我一下感激不尽。

    helloAda.png

    色差实现,先设定渐变方向,再设置 2 种以上的颜色一种是透明的,另外一种就随意了。如果没有透明色,就会掩盖掉 view ,第三就是颜色分割点的值。注意:分割点的值和颜色的数量要匹配。 色差实现的效果

    色差效果.gif

    环形带间隔的进度条实现 或者全部饱满的也有,在代码中。 带间隔的进度条.gif

    加载提示框 加载提示框.gif

    后续还会继续更新一些其他的内容,如果觉得对你有用请点个喜欢吧。谢谢。

    2 replies    2016-09-26 15:25:37 +08:00
    ma125125t
        1
    ma125125t  
       Sep 22, 2016
    不错,支持
    newkengsir
        2
    newkengsir  
    OP
       Sep 26, 2016
    谢谢您的支持
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   888 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 22:10 · PVG 06:10 · LAX 15:10 · JFK 18:10
    ♥ Do have faith in what you're doing.