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

人已赞赏
iOS文章

iOS开发同一段文字显示不同颜色和字体

2021-2-3 0:22:31

iOS文章

iOS开发使用ShareSDK做分享如何让新浪分享后是可点击蓝色文字

2021-2-3 1:37:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索