CAGradientLayer渐变效果

属性

  1. startPointendPoint
    决定渐变方向,以单位坐标系定义。左上角{0,0},右下角{1,1}
  2. colors
    渐变的颜色,是一个CGColorRef的数组。
  3. locations
    定义了渲染的每个颜色的位置。取值在0到1之间。长度一定和colors相同。

例子

  1. 多重渐变

        var gradientLayer = CAGradientLayer.init()
        gradientLayer.colors = [UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.6).CGColor,UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.9).CGColor,UIColor.init(white: 0.4, alpha: 0.5).CGColor]
        gradientLayer.colors = [UIColor.blackColor().CGColor,UIColor.yellowColor().CGColor,UIColor.blueColor().CGColor]
        gradientLayer.locations = [0.1,0.3,0.5]
        gradientLayer.frame = textLayer.bounds
        gradientLayer.startPoint = CGPointMake(1, 0)
        gradientLayer.endPoint = CGPointMake(1, 1)
    //        textLayer.mask = gradientLayer
        self.contentView.layer.addSublayer(gradientLayer)
    

    ?

  2. 作为蒙版,实现文字渐变
        var gradientLayer = CAGradientLayer.init()
        gradientLayer.colors = [UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.6).CGColor,UIColor.init(red: 0, green: 0, blue: 0, alpha: 0.9).CGColor,UIColor.init(white: 0.4, alpha: 0.5).CGColor]
    //        gradientLayer.colors = [UIColor.blackColor().CGColor,UIColor.yellowColor().CGColor,UIColor.blueColor().CGColor]
        gradientLayer.locations = [0.1,0.3,0.5]
        gradientLayer.frame = textLayer.bounds
        gradientLayer.startPoint = CGPointMake(1, 0)
        gradientLayer.endPoint = CGPointMake(1, 1)
        textLayer.mask = gradientLayer
    

    ?

时间: 2024-10-12 02:56:34

CAGradientLayer渐变效果的相关文章

iOS开发——UI篇&文字渐变效果:图层中的mask属性

文字渐变效果:图层中的mask属性 本次文章,主要讲述的是图层中的mask属性,利用它,可以做出文字渐变效果! 一.文字渐变效果: 二.文字渐变实现思路: 1.创建一个颜色渐变层,渐变图层跟文字控件一样大. 2.用文字图层裁剪渐变层,只保留文字部分,就会让渐变层只保留有文字的部分,相当于间接让渐变层显示文字,我们看到的其实是被裁剪过后,渐变层的部分内容. 注意:如果用文字图层裁剪渐变层,文字图层就不在拥有显示功能,这个图层就被弄来裁剪了,不会显示,在下面代码中也会有说明. 2.1 创建一个带有文

IOS进度渐变图层CAGradientLayer

看支付宝蚂蚁积分,天气预报等好多APP都有圆形渐变效果,今天就试着玩了. 一.CAGradientLayer类中属性介绍 CAGradientLayer继承CALayer,主要有以下几个属性: [email protected](nullable, copy) NSArray *colors; 渐变的颜色 这个数组中只设置一个颜色是不显示的 [email protected](nullable, copy) NSArray<NSNumber *> *locations;每种颜色的最亮的位置 [

CAGradientLayer的使用

原文: http://blog.csdn.net/hdfqq188816190/article/details/51014741 CAGradientLayer可以方便的处理颜色渐变 效果: 代码如下: CAGradientLayer* colorLayer = [[CAGradientLayer alloc]init]; colorLayer.frame = CGRectMake(0, 100, 200, 100); // 颜色分类 colorLayer.colors = @[(__bridg

IOS渐变图层CAGradientLayer

看支付宝蚂蚁积分,天气预报等好多APP都有圆形渐变效果,今天就试着玩了. 一.CAGradientLayer类中属性介绍 CAGradientLayer继承CALayer,主要有以下几个属性: [email protected](nullable, copy) NSArray *colors; 渐变的颜色 [email protected](nullable, copy) NSArray<NSNumber *> *locations;每种颜色的最亮的位置 [email protected] C

jQuery实现字体颜色渐变效果

jQuery不允许css属性值为非数字的属性进行动画处理, 比如.animate(color:'red',500)或是.animate(fontWeight:'bold',500)都无法运行, 因此如果想实现颜色渐变的效果需要其他方法,示例如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Do

将CAGradientLayer用作maskView的遮罩图层

说明 CAGradientLayer可以用作alpha遮罩,供maskView使用,这两种东西都是非常偏门的东西,但是,偏门不代表功能不强大,我们可以用CAGradientLayer制作出非常牛逼的动画效果,此博文,本人抛砖引玉简易介绍怎么将CAGradientLayer与maskView联系上.后续博文会陆续扩展并写出更好的控件. 只有完美的UI交互效果才能够为功能强大的app锦上添花,本人致力于研究分析苹果开发中那些巨牛逼但却无人问津的冷门特效. 效果图 源码 // // CAGradien

Android通过Alpha实现渐变效果的几个方法

原理 : 通过改变控制透明度的Alpha值来实现渐变效果 方法一 : 使用XML 步骤一 : 首先,我们要在res文件夹下的anim文件夹里创建一个.xml文件(这里我创建的是alpha.xml) 设置开始时透明度为0.0(透明):android:fromAlpha="0.0" 设置结束时透明度1.0(不透明):android:toAlpha="1.0" <alpha xmlns:android="http://schemas.android.com

Animated progress view with CAGradientLayer(带翻译)

原文网址:使用CAGradientLayer的动画精度条View Modern software design is getting flatter and thinner all the time. Another trend that follows suit is the thin, one pixel progress bar that you see at the top of websites and apps. You’ve seen in it on Medium blogs,

CAGradientLayer实现图片渐变透明效果

CAGradientLayer实现图片渐变透明效果 要实现的效果如下: 源码: // // RootViewController.m // CAGradientLayer // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "YXGCD.h" @interface RootViewController () @property (n