最近看到个分屏效果，觉得挺好玩的，所以就写出来给大家分享一下，首先来看效果：
看着有点卡，因为是模拟器的缘故，真机上肯定是不会有的，用到的技术包括，CABasicAnimation，CALayer,CAShapeLayer，贝赛尔曲线，还有动画结束的代理方法，都是之前已经介绍过使用方法的技术，进行巧妙的组合就出现了这样的分屏效果。
动画分三部分，其中1，2是关联操作：
1.屏幕中央的曲线分界线是贝赛尔曲线；
2.用CALayer和CAShapeLayer分别构建出上部分和下部分的内容；
3.设置锚点的位置，关于锚点要认真去了解哦，至于为什么这么说，学习代码的小伙伴看到代码自然会有点懵，不多说了；
4.设置根据锚点位置给基础动画时间和toValue，启动动画，动画结束后在代理中删除内容。
具体的注释代码中写的很详细，看代码：
#import "ScreenView.h" @implementation ScreenView - (id)initWithFrame:(CGRect)frame screenImage:(UIImage *)image { self = [super initWithFrame:frame]; if (self) { _topLayer = [CALayer layer]; _downLayer = [CALayer layer]; self.screenImage = image; [self drawTopShapeLayer]; [self drawDownShapeLayer]; } return self; } - (void)screenAnimation { //创建一个CABasicAnimation作用于CALayer的anchorPoint CABasicAnimation *topAnimation = [CABasicAnimation animationWithKeyPath:@"anchorPoint"]; //设置移动路径 topAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(1, 1)]; //动画时间 topAnimation.duration = 1.5; //设置代理，方便完成动画后移除当前view topAnimation.delegate = self; //设置动画速度为匀速 topAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; //设置动画结束后不移除 topAnimation.removedOnCompletion = NO; //动画结束后保持结束状态 topAnimation.fillMode = kCAFillModeForwards; [_topLayer addAnimation:topAnimation forKey:@"topAnimation"]; //创建一个CABasicAnimation作用于CALayer的anchorPoint CABasicAnimation *downAnimation = [CABasicAnimation animationWithKeyPath:@"anchorPoint"]; //设置移动路径 downAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; //动画时间 downAnimation.duration = 1.5; //设置动画速度为匀速 downAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; //设置动画结束后不移除 downAnimation.removedOnCompletion = NO; //动画结束后保持结束状态 downAnimation.fillMode = kCAFillModeForwards; [_downLayer addAnimation:downAnimation forKey:@"downAnimation"]; } - (void)drawTopShapeLayer { //绘制贝赛尔曲线 UIBezierPath *topBezier = [[UIBezierPath alloc]init]; [topBezier moveToPoint:CGPointMake(0, 0)]; [topBezier addLineToPoint:CGPointMake(self.bounds.size.width, 0)]; [topBezier addCurveToPoint:CGPointMake(self.bounds.size.width/2.0, self.bounds.size.height/2.0) controlPoint1:CGPointMake(self.bounds.size.width, 0) controlPoint2:CGPointMake(self.bounds.size.width/3*2+70, self.bounds.size.height/3+70)]; [topBezier addCurveToPoint:CGPointMake(0, self.bounds.size.height) controlPoint1:CGPointMake(self.bounds.size.width/3-70, self.bounds.size.height/3*2-70) controlPoint2:CGPointMake(0, self.bounds.size.height)]; [topBezier addLineToPoint:CGPointMake(0, 0)]; [topBezier closePath]; //创建一个CAShapeLayer，得到贝赛尔曲线的路径 CAShapeLayer *topShape = [CAShapeLayer layer]; topShape.path = topBezier.CGPath; //给_topLayer设置contents图 _topLayer.contents = (__bridge id _Nullable)(_screenImage.CGImage); _topLayer.frame = self.frame; [self.layer addSublayer:_topLayer]; //截取上面shape上的图片内容 _topLayer.mask = topShape; } - (void)drawDownShapeLayer { //绘制贝赛尔曲线 UIBezierPath *downBezier = [[UIBezierPath alloc]init]; [downBezier moveToPoint:CGPointMake(self.bounds.size.width, 0)]; [downBezier addCurveToPoint:CGPointMake(self.bounds.size.width/2.0, self.bounds.size.height/2.0) controlPoint1:CGPointMake(self.bounds.size.width, 0) controlPoint2:CGPointMake(self.bounds.size.width/3*2+70, self.bounds.size.height/3+70)]; [downBezier addCurveToPoint:CGPointMake(0, self.bounds.size.height) controlPoint1:CGPointMake(self.bounds.size.width/3-70, self.bounds.size.height/3*2-70) controlPoint2:CGPointMake(0, self.bounds.size.height)]; [downBezier addLineToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height)]; [downBezier addLineToPoint:CGPointMake(self.bounds.size.width, 0)]; [downBezier closePath]; //创建一个CAShapeLayer，得到贝赛尔曲线的路径 CAShapeLayer *downShape = [CAShapeLayer layer]; downShape.path = downBezier.CGPath; //给_downLayer设置contents图 _downLayer.contents = (__bridge id _Nullable)(_screenImage.CGImage); _downLayer.frame = self.frame; [self.layer addSublayer:_downLayer]; //截取下面shape上的图片内容 _downLayer.mask = downShape; } - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { if (flag) { //动画结束后删除内容图片 [self removeFromSuperview]; } } @end
Demo下载地址：https://github.com/codeliu6572/Screen_divided
