iOS开发－ 分屏动画

最近看到个分屏效果，觉得挺好玩的，所以就写出来给大家分享一下，首先来看效果：

看着有点卡，因为是模拟器的缘故，真机上肯定是不会有的，用到的技术包括，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