有时你会看到很多镂空的试图或者是镂空视图的动画效果,感觉很酷炫,其实只要掌握其中实现的原理,想实现怎样的效果就能实现怎样的镂空效果。
图层中,因为UIView的layer为CALayer,不像CAShapeLayer那样有Path属性,所以我们无法直接修改layer的的显示形状,唯一能是layer显示出奇特形状的方法只有两种。
叶子状进度条.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动态绘制实现的,先了解更多的可以看我的其他两篇文章:
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
有问题可以留言交流哦。