专栏首页進无尽的文章绘图- 镂空效果及其动画实现解析

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

前言

有时你会看到很多镂空的试图或者是镂空视图的动画效果,感觉很酷炫,其实只要掌握其中实现的原理,想实现怎样的效果就能实现怎样的镂空效果。

原理解析

  • UIView的maskView属性。
  • CALayer的mask属性(也是一个CALayer)。 通过控制UIView的maskView、CALayer的mask有效区域,都可以修改UIView和 UIView的layer的显示外形,从而得到镂空或者其他的奇特形状及其动画。

实现关键点

图层中,因为UIView的layer为CALayer,不像CAShapeLayer那样有Path属性,所以我们无法直接修改layer的的显示形状,唯一能是layer显示出奇特形状的方法只有两种。

  • 使用图片作为mask可以直接获得需要显示的外形,需要注意的是这样的图片中需要展示的区域必须有像素,不需要显示的地方不可以有像素为空白,才能出效果,而且有像素的区域的透明度也会影响到最终的效果。
  • 使用自定义形状的CAShapeLayer作为mask也可以达到使图层显示出镂空的效果。同样的,图层显示出来的区域是 CAShapeLayer的外形。 (1) 这里特别强调下,当CAShapeLayer没有设置backgroundColor时,(默认为backgroundColor = [UIColor clearColor].CGColor),CAShapeLayer的显示区域就是它的 path区域(一般为UIBezierPath绘制。),这种情况下CAShapeLayer的fillColor的透明度,也会对图层的显示起到影响作用,图层最终的显示只跟fillColor的透明度有关,跟fillColor的颜色无关。 (2) 当CAShapeLayer的backgroundColor不是clearColor的时候,CAShapeLayer的显示区域就是它本身的Frame,跟它的path区域就没关系了。 (3) CAShapeLayer的path区域不能超出CAShapeLayer的Frame,超出部分不会对图层的显示起作用。

例子

叶子状进度条

叶子状进度条.gif

self.waveView = [[JWWavesAnimationView alloc] initWithFrame:CGRectMake(([[UIScreen mainScreen] bounds].size.width - 200) / 2, ([[UIScreen mainScreen] bounds].size.height - 120) / 2, 200, 120)];
[_waveView setUp];
[self.view addSubview:self.waveView];

//mask 蒙版
CALayer *maskLayer = [CALayer layer];
[maskLayer setFrame:self.waveView.bounds];
maskLayer.contents = (id)[UIImage imageNamed:@"123456"].CGImage;

self.waveView.layer.mask = maskLayer;

使用了图片作为遮罩图层,self.waveView为一个水波上涨的自定义试图,其中水波的上升效果是通过核心动画和 CAShapeLayer的path动态绘制实现的,先了解更多的可以看我的其他两篇文章: 绘图-视图遮罩MaskView的使用 绘图-类似百度外卖波浪效果的实现与关键点解析

叶子状裁图

UIImageView *imageV  =[[UIImageView alloc] initWithFrame:CGRectMake(0,100,300,150)];
imageV.image = [UIImage  imageNamed:@"joey-kyber-132520.jpg"];
imageV.backgroundColor = [UIColor clearColor];
[self.view addSubview:imageV];

//mask 蒙版
CALayer *maskLayer = [CALayer layer];
[maskLayer setFrame:imageV.bounds];
maskLayer.contents = (id)[UIImage imageNamed:@"123456"].CGImage;

imageV.layer.mask = maskLayer;

一个镂空进度图的分布解析

背景red.gif

self.waveSinLayer = [CAShapeLayer layer];
_waveSinLayer.backgroundColor = [UIColor redColor].CGColor;
self.waveSinLayer.fillColor = [[UIColor greenColor] CGColor];
self.waveSinLayer.frame = CGRectMake(0, self.bounds.size.height, self.bounds.size.width, self.bounds.size.height);
[self.layer addSublayer:self.waveSinLayer];

self.waveCosLayer = [CAShapeLayer layer];
_waveCosLayer.backgroundColor = [UIColor clearColor].CGColor;
self.waveCosLayer.fillColor = [[UIColor blueColor] CGColor];
self.waveCosLayer.frame = CGRectMake(0, self.bounds.size.height, self.bounds.size.width, self.bounds.size.height);
[self.layer addSublayer:self.waveCosLayer];

因为我设置了self.waveSinLayer的背景为红色,所以它里面的path形成的波浪便不再显示,而 self.waveCosLayer的背景设置为clearColor就可以看见它的蓝色波浪了。

背景clear.gif

设置了self.waveSinLayer的背景和self.waveCosLayer的背景都为clearColor。

移动.gif

CGPoint position = self.waveSinLayer.position;
position.y = position.y - self.bounds.size.height-10;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint:self.waveSinLayer.position];
animation.toValue = [NSValue valueWithCGPoint:position];
animation.duration = kWavePositionDuration;
animation.repeatCount = HUGE_VALF;
animation.removedOnCompletion = NO;

[self.waveSinLayer addAnimation:animation forKey:@"positionWave"];
[self.waveCosLayer addAnimation:animation forKey:@"positionWave"];

使用CABasicAnimation设置动画使波浪图层上移。

最终效果.gif

_grayImageView = [[UIImageView alloc] initWithFrame:self.bounds];
_grayImageView.image = [UIImage imageNamed:@"du.png"];
 [self addSubview:_grayImageView];

_cosineImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 40, self.frame.size.width, self.frame.size.height)];
_cosineImageView.image = [UIImage imageNamed:@"gray.png"];

_sineImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 40, self.frame.size.width, self.frame.size.height)];
_sineImageView.image = [UIImage imageNamed:@"blue.png"];

_waveSinLayer.mask = _sineImageView.layer;
_waveCosLayer.mask = _cosineImageView.layer;

设置mask即可实现其中两张图片的动态波浪展示。 其中的三张图片为:

du.png

gray.png

blue.png


小结

有问题可以留言交流哦。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • UI篇-关于单个页面屏幕旋转要注意的问题

    有时候,我们会需要在整个项目中,使某一个ViewController支持屏幕旋转,而其他的ViewController并不能自动旋转。这是一个很常见的需求,下面...

    進无尽
  • 实践-小效果 Ⅳ

    设置一个UIImageView为倒立的同等控件,设置这个UIImageView的layer的mask为一个渐变图层,效果就出来了。

    進无尽
  • 绘图-简单手绘板的实现

    自定义一个UIBezierPath的子类 LGPaintpath,下面是它的初始化方法

    進无尽
  • ReactiveCocoa,最受欢迎的iOS函数响应式编程库(2.5版),没有之一!

    简介 项目主页: ReactiveCocoa 实例下载: https://github.com/ios122/ios122 简评: 最受欢迎,最有价值的iOS响...

    ios122
  • AlphaGo Zero你也来造一只,PyTorch实现五脏俱全| 附代码

    遥想当年,AlphaGo的Master版本,在完胜柯洁九段之后不久,就被后辈AlphaGo Zero (简称狗零) 击溃了。

    量子位
  • python自学成才之路 类详细用法

    python是一门面向对象编程的语言,python的类和java中的类思想上有很多一样的地方,比如python类也是通过class修饰,里面也有成员属性,成员方...

    我是李超人
  • Python GUI项目实战(一)登录窗体的设计与实现

    前面我们学习了Python GUI 图型化界面Tkinter的基础知识,为了检测我们的学习成果,学以致用。我们从今天开始做一个综合Tkinter案例--基于Tk...

    小雨编程
  • 小蛇学python(2)两百行代码实现旅游中国34座大城市最短路径

    直接说基础语法,也许大家不会感兴趣。前言之后的这一章,给大家介绍一下我最近写出来的一个小功能。用python语言实现GA算法来解决TSP问题,希望以此来激发大家...

    用户2145057
  • 中文NLP笔记:11. 基于 LSTM 生成古诗

      在每行末尾加上 ] 符号是为了标识这首诗已经结束,说明 ] 符号之前的语句和之后的语句是没有关联关系的,后面会舍弃掉包含 ] 符号的训练数据。

    杨熹
  • Loxodon.Framework.XLua

    Loxodon.Framework.XLua 是一个XLua的开源的MVVM框架,它做为Unity3D的MVVM框架Loxodon.Framework的插件来使...

    Loxodon Studio

扫码关注云+社区

领取腾讯云代金券