iOS动画 ：过山车

原文作者非典型技术宅我只是学习，勿喷。

效果

过山车.gif

思维导图

思维导图

代码部分：

1.背景天空

UIColor *lightColor = [UIColor colorWithRed:40.0f/255.0f green:150.0f/255.0f blue:200.0f/255.0f alpha:1.0];
UIColor *darkColor = [UIColor colorWithRed:255.0f/255.0f green:250.0f/255.0f blue:250.0f/255.0f alpha:1.0];//设置渐变颜色
layer.startPoint = CGPointMake(0, 0);
layer.endPoint = CGPointMake(1, 1);//设置渐变角度

2.云彩部分

layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"cloud"].CGImage);//填充图片
UIBezierPath *bezierPath = [[UIBezierPath alloc] init];
[bezierPath moveToPoint:CGPointMake(SCREENSIZE.width+10, 50)];
[bezierPath addLineToPoint:CGPointMake(-63, 50)];//绘制路径

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = bezierPath.CGPath;
animation.duration = 30;
animation.repeatCount = CGFLOAT_MAX;//动画执行次数
animation.calculationMode = kCAAnimationPaced;//恒速

3.土地部分和小树就不写了，挺简单的，就创建设置frame和背景色就行了

4.草坪左右两个草坪以左边草坪为例

[leftPath moveToPoint:leftStartPoint];
[leftPath addLineToPoint:CGPointMake(0, SCREENSIZE.height-100)];
[leftPath addQuadCurveToPoint:CGPointMake(SCREENSIZE.width/3.0, k_LAND_BEGIN_HEIGHT) controlPoint:CGPointMake(SCREENSIZE.width/5.0, SCREENSIZE.height-100)];//二次贝塞尔曲线
leftLawn.path = leftPath.CGPath;

-(void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
二次贝塞尔曲线：endPoint:终点位置 controlPoint：控制点

5.雪山

这个是从大神那里学来的：
在画山的过程中，最复杂的是找到山上左右两侧山坡上边缘的那个点的CGPoint。以第一座山左边上坡上开始有雪的那个点来说。其实要计算的是从山脚到山顶两点之间的连线上任意一点的坐标。知道了X轴坐标，要计算Y轴坐标。这个就是咱们初中学到的计算公式，y = kx + b。 k是斜率，b是截距。起点、终点已经知道了，可以很容易的计算出斜率k。根据k，再计算出b。这样给出这条线段上任意一点x轴坐标，就能轻易的算出y轴坐标了。xy都知道了。

CGFloat k = (endpoint.y - startPoint.y) / (endpoint.x - startPoint.x);
CGFloat b = startPoint.y - startPoint.x * k;
CGFloat yvalue = k * xvalue + b;
return CGPointMake(xvalue, yvalue);

左边的山

CAShapeLayer *leftSnow = [[CAShapeLayer alloc] init];
UIBezierPath *leftPath = [[UIBezierPath alloc] init];
//    把bezierpath的起点移动到雪山左下角
[leftPath moveToPoint:CGPointMake(0, SCREENSIZE.height-120)];
//    画一条线到山顶
[leftPath addLineToPoint:CGPointMake(100, 100)];
//    画一条线到右下角->左下角->闭合
[leftPath addLineToPoint:CGPointMake(SCREENSIZE.width / 2, k_LAND_BEGIN_HEIGHT)];
[leftPath addLineToPoint:CGPointMake(0, k_LAND_BEGIN_HEIGHT)];
[leftPath closePath];
leftSnow.path = leftPath.CGPath;
leftSnow.fillColor = [UIColor whiteColor].CGColor;
[self.view.layer addSublayer:leftSnow];
//    开始画山体没有被雪覆盖的部分
CAShapeLayer *leftSnowbergBody = [[CAShapeLayer alloc] init];
UIBezierPath *leftSnowbergBodyPath = [[UIBezierPath alloc] init];
//    把bezierpath的起点移动到雪山左下角相同的位置
CGPoint startPoint = CGPointMake(0, SCREENSIZE.height - 120);
CGPoint endPoint = CGPointMake(100, 100);
CGPoint firstPathPoint = [self calculateWithXValue:40 startPoint:startPoint endpoint:endPoint];
[leftSnowbergBodyPath moveToPoint:startPoint];
[leftSnowbergBodyPath addLineToPoint:firstPathPoint];
[leftSnowbergBodyPath addLineToPoint:CGPointMake(60, firstPathPoint.y)];
[leftSnowbergBodyPath addLineToPoint:CGPointMake(100, firstPathPoint.y + 30)];
[leftSnowbergBodyPath addLineToPoint:CGPointMake(140, firstPathPoint.y)];
[leftSnowbergBodyPath addLineToPoint:CGPointMake(155, firstPathPoint.y)];
[leftSnowbergBodyPath addLineToPoint:CGPointMake(SCREENSIZE.width / 2, k_LAND_BEGIN_HEIGHT)];
[leftSnowbergBodyPath addLineToPoint:CGPointMake(0, k_LAND_BEGIN_HEIGHT)];
[leftSnowbergBodyPath closePath];
leftSnowbergBody.path = leftSnowbergBodyPath.CGPath;
UIColor *snowColor = [UIColor colorWithDisplayP3Red:139.0 /255.0 green:92.0 /255.0 blue:0.0 /255.0 alpha:1.0];
leftSnowbergBody.fillColor = snowColor.CGColor;
[self.view.layer addSublayer:leftSnowbergBody];

6.轨道

绿色的轨道可以分成三部分左边轨道+圆圈+右边轨道

[path moveToPoint:CGPointMake(SCREENSIZE.width+10, k_LAND_BEGIN_HEIGHT)];
[path addLineToPoint:CGPointMake(SCREENSIZE.width+10, SCREENSIZE.height-70)];
[path addQuadCurveToPoint:CGPointMake(SCREENSIZE.width/1.5, SCREENSIZE.height-70) controlPoint:CGPointMake(SCREENSIZE.width-100, SCREENSIZE.height/5)];//右边轨道
[path addArcWithCenter:CGPointMake(SCREENSIZE.width / 1.6, SCREENSIZE.height - 140) radius:70 startAngle:M_PI_2 endAngle:2.5 * M_PI clockwise:YES];//画圆圈
[path addCurveToPoint:CGPointMake(0, SCREENSIZE.height - 100) controlPoint1:CGPointMake(SCREENSIZE.width / 1.8 - 60, SCREENSIZE.height - 60) controlPoint2:CGPointMake(150, SCREENSIZE.height / 2.3)];
[path addLineToPoint:CGPointMake(-5, k_LAND_BEGIN_HEIGHT)];//左边轨道

CAShapeLayer *trackLine = [[CAShapeLayer alloc] init];
trackLine.lineCap = kCALineCapRound;//设置虚线
trackLine.strokeColor = [UIColor whiteColor].CGColor;
trackLine.lineDashPattern = @[@1.0,@6.0];
trackLine.lineWidth = 2.5;
trackLine.fillColor = [UIColor clearColor].CGColor;
trackLine.path = path.CGPath;
[_greenTrack addSublayer:trackLine];

7.小车车

CAKeyframeAnimation *ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
ani.path = track.path;//小车运动路径跟轨道路径统一
ani.duration = duration;
ani.beginTime = beginTime;
ani.repeatCount = CGFLOAT_MAX;
ani.calculationMode = kCAAnimationPaced;//恒速
ani.rotationMode = kCAAnimationRotateAuto;//确保沿路径运动

源代码在这：GitHub gitee

我这里写的都只是皮毛，大神：非典型技术宅有好多干货哦~