使用CAGradientLayer可以实现颜色的渐变, 我们先看下头文件 @interface CAGradientLayer : CALayer @property(nullable, copy) 需要说明的是CAGradientLayer只能实现矩形范围内的颜色渐变, 那渐变的圆环要如何实现呢? mask 对了 首先我们创建两个挨着的矩形渐变色块, 并把两个色块添加到同一个layer ? CAGradientLayer * leftL = [self createGradientLayerWithColors:@[(id)[UIColor redColor].CGColor, CAGradientLayer * rightL = [self createGradientLayerWithColors:@[(id)[UIColor greenColor].CGColor -(CAGradientLayer *)createGradientLayerWithColors:(NSArray *)colors { CAGradientLayer * gradientLayer
也就是今天的主角CAGradientLayer。 CAGradientLayer是CALayer图层类的子类,用于处理渐变色的层结构。 CAGradientLayer的坐标系统是从坐标(0,0)到(1,1)绘制的矩形。 ? CAGradientLayer的坐标系统.png CAGradientLayer的frame值的size不为正方形的话,坐标系统会被拉伸。 CAGradientLayer的startPoint与endPoint会直接影响颜色的绘制方向。 CAGradientLayer例子 最简单的三原色渐变例子 效果展示 ?
可以结合CAGradientLayer用来实现颜色滚动渐变 初始化一个CAGradientLayer 设置一个CABasicAnimation 用来做CAGradientLayer 的动画 CAGradientLayer.mask = label.layer; Lable的layer 赋值给 CAGradientLayer的maskLayer即可 效果如下: ?
] <UITableViewCell: 0x10ff5e5e0; frame = (0 767.5; 375 120); hidden = YES; autoresize = W; layer = <CAGradientLayer : 0x280b80860>> | <_UISystemBackgroundView: 0x10fe2d170; frame = (0 0; 375 120); layer = <CAGradientLayer : 0x280c58640>> | <UIView: 0x10ff9a820; frame = (0 0; 375 120); layer = <CAGradientLayer: 0x280b9db60 >> | | <UIButton: 0x10ff9ab10; frame = (17 0; 170.5 60); opaque = NO; layer = <CAGradientLayer: >> | | <UIView: 0x10ff9ea10; frame = (15 120; 345 0.5); layer = <CAGradientLayer: 0x280b9f0c0>>
我给自己挖的坑 所以呢,在今天的博客里你将会看到以下截个内容 CATransform3D CATransformLayer CAGradientLayer CAReplicatorLayer DWMirrorView ---- CAGradientLayer CAGradientLayer本身的属性也比较少,而且完全是针对于过渡颜色来的。 需要说明的是,CAGradientLayer只能做矩形的渐变图层。 你要怎么做? 所以说这个效果要如何实现呢?其实啊,这只是一个错觉,看这个。 矩形渐变层 所以说看到这你就知道了吧,两个拼一起的CAGradientLayer,然后用一个shapeLayer做了一个mask就成了环形的过渡层了。 *)createGradientLayerWithColors:(NSArray *)colors { CAGradientLayer * gradientLayer = [CAGradientLayer
] <UITableViewCell: 0x10ff5e5e0; frame = (0 767.5; 375 120); hidden = YES; autoresize = W; layer = <CAGradientLayer : 0x280b80860>> | <_UISystemBackgroundView: 0x10fe2d170; frame = (0 0; 375 120); layer = <CAGradientLayer : 0x280c58640>> | <UIView: 0x10ff9a820; frame = (0 0; 375 120); layer = <CAGradientLayer: 0x280b9db60 >> | | <UIButton: 0x10ff9ab10; frame = (17 0; 170.5 60); opaque = NO; layer = <CAGradientLayer: >> | | <UIView: 0x10ff9ea10; frame = (15 120; 345 0.5); layer = <CAGradientLayer: 0x280b9f0c0>>
label = [[UILabel alloc]initWithFrame:CGRectMake(0,(ScreenWidth/2)-30, ScreenWidth/2-2.5, 30)]; CAGradientLayer *layer = [CAGradientLayer new]; layer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
12345678910111213141516//生成渐变色 calayer *gradientlayer = [calayer layer]; //左侧渐变色 cagradientlayer *leftlayer = [cagradientlayer layer]; leftlayer.frame = cgrectmake(0, 0, self.bounds.size.width / 2, yellowcolor].cgcolor, (id)[uicolor greencolor].cgcolor]; [gradientlayer addsublayer:leftlayer]; //右侧渐变色 cagradientlayer *rightlayer = [cagradientlayer layer]; rightlayer.frame = cgrectmake(self.bounds.size.width / 2, 0,
追光动效实现 效果如下: 实现: 如下图,红框为一个UIVIew,CAGradientLayer的startPoint和endPoint的取值是(0,0)到(1,1)。 initWithFrame:CGRectMake(20, 150, 300, 188)]; view.layer.cornerRadius = 4.0; view.layer.masksToBounds = YES; CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = view.bounds; gradientLayer.colors =
这篇文章是通过结合使用CAGradientLayer、CABasicAnimation 以及CAAnimationDelegate来达到颜色渐变以及转换的动画, 下面是今天要达成的效果图: 首先创建一个 CAGradientLayer和几个自己喜欢的颜色,让VC持有。 colorLiteral(red: 0.9607843161, green: 0.7058823705, blue: 0.200000003, alpha: 1).cgColor let gradient = CAGradientLayer colorLiteral(red: 0.9607843161, green: 0.7058823705, blue: 0.200000003, alpha: 1).cgColor let gradient = CAGradientLayer
CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.frame = CGRectMake(0,
设计需求 渐变关键代码: CAGradientLayer *gradientLayer0 = [[CAGradientLayer alloc] init]; gradientLayer0
YES; bgView.backgroundColor =[UIColor blackColor]; [self.view addSubview:bgView]; CAGradientLayer *gradientLayer2 = [CAGradientLayer layer]; gradientLayer2.colors = @[(__bridge id)[UIColor redColor NSMutableArray arrayWithObjects:(id)[UIColor redColor].CGColor,(id)[UIColor whiteColor].CGColor, nil]; CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.shadowPath = bezierPath.CGPath; gradientLayer.frame
框架中的粒子发射层,在以前的一片博客中有详细的介绍和范例,这里不再重复,地址如下: 粒子效果的应用和火焰范例:http://my.oschina.net/u/2340880/blog/485095 二、CAGradientLayer CAGradientLayer是用于色彩梯度展示的layer图层,通过CAGradientLayer,我们可以很轻松的创建出有过渡效果的色彩图。 iOS中只支持一种默认的kCAGradientLayerAxial,我们无需手动设置 */ @property(copy) NSString *type; 用如下代码创建一个度过视图的效果: CAGradientLayer * layer = [CAGradientLayer layer]; layer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor
今天主要通过实现一个音乐播放状态的展示条,还有一个点赞的动画效果,来看看 CAReplicatorLayer、CAEmitterLayer和CAGradientLayer这三个专用层。 CAGradientLayer CAGradientLayer是用来生成两种或更多颜色平滑渐变的。 用Core Graphics复制一个CAGradientLayer并将内容绘制到一个普通图层的寄宿图也是有可能的,但是CAGradientLayer的真正好处在于绘制使用了硬件加速。 实现效果如下: 渐变色.gif func createGradientLayer(){ gradientlayer = CAGradientLayer.init()
UIButton alloc]init]; buttonOrigin.frame = CGRectMake(15, 150, self.view.frame.size.width-15, 50); CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.colors = @[(__bridge id)UIColor.redColor.CGColor
view.frame.size.width, view.frame.size.height); [view addSubview:self.viewCover]; // gradientLayer CAGradientLayer 是CALayer的一个子类,用来生成渐变色图层 CAGradientLayer *colorLayer = [CAGradientLayer layer]; colorLayer.frame
带动画渐进效果与颜色渐变的圆弧进度控件设计 今天帮朋友写了一个小巧的圆弧进度控件,控件十分简单,主要设计思路采用CAShapeLayer来创建控件圆弧形状,使用CAGradientLayer contentWidth; float _contentHeight; //形状layer CAShapeLayer * _shapeLayer; //颜色渐变layer CAGradientLayer * _gradLayerR; CAGradientLayer * _gradLayerL; CALayer * _gradLayer; //内容layer CAShapeLayer contentLayer.position; _gradLayer.backgroundColor = [UIColor clearColor].CGColor; _gradLayerL = [CAGradientLayer gradLayerL.bounds.size.width/2, _gradLayerL.bounds.size.height/2); [_gradLayer addSublayer:_gradLayerL]; _gradLayerR = [CAGradientLayer
QuartzCore.CAEmitterCell // 粒子特效 Cell import QuartzCore.CAEmitterLayer // 粒子特效 图层 import QuartzCore.CAGradientLayer CoreGraphics的CGAffineTransform进一步封装 封装了CALayer,它是使视图呈现出来的基础类 封装了一些特殊用途的图层Layer(如粒子特效CAEmitterLayer、渐变CAGradientLayer
七夕福利哦~) 一、绘制蓝色海洋背景 从动图中可以看出这片背景呈渐变色,自然我们可以想到用CAGradientLayer类来创建渐变图层。 这块代码值得一提的地方在于设置颜色,CAGradientLayer的colors属性是一个数组,里面可以用于存放不同的颜色。 @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //创建背景 CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init]; CGFloat gradientX = 0; CGFloat gradientY =