iOS开发- 分屏动画

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/CodingFire/article/details/52290710

最近看到个分屏效果,觉得挺好玩的,所以就写出来给大家分享一下,首先来看效果:
这里写图片描述
看着有点卡,因为是模拟器的缘故,真机上肯定是不会有的,用到的技术包括,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

展开阅读全文

没有更多推荐了,返回首页