原文作者非典型技術(shù)宅我只是學(xué)習(xí),勿噴。
效果
過(guò)山車(chē).gif
思維導(dǎo)圖
思維導(dǎo)圖
代碼部分:
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];//設(shè)置漸變顏色
layer.startPoint = CGPointMake(0, 0);
layer.endPoint = CGPointMake(1, 1);//設(shè)置漸變角度
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;//動(dòng)畫(huà)執(zhí)行次數(shù)
animation.calculationMode = kCAAnimationPaced;//恒速
3.土地部分和小樹(shù)就不寫(xiě)了柬讨,挺簡(jiǎn)單的,就創(chuàng)建設(shè)置frame和背景色就行了
4.草坪左右兩個(gè)草坪以左邊草坪為例
[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:終點(diǎn)位置 controlPoint:控制點(diǎn)
5.雪山
這個(gè)是從大神那里學(xué)來(lái)的:
在畫(huà)山的過(guò)程中伪货,最復(fù)雜的是找到山上左右兩側(cè)山坡上邊緣的那個(gè)點(diǎn)的CGPoint们衙。以第一座山左邊上坡上開(kāi)始有雪的那個(gè)點(diǎn)來(lái)說(shuō)。其實(shí)要計(jì)算的是從山腳到山頂兩點(diǎn)之間的連線上任意一點(diǎn)的坐標(biāo)碱呼。知道了X軸坐標(biāo)蒙挑,要計(jì)算Y軸坐標(biāo)。這個(gè)就是咱們初中學(xué)到的計(jì)算公式愚臀,y = kx + b忆蚀。 k是斜率,b是截距姑裂。起點(diǎn)馋袜、終點(diǎn)已經(jīng)知道了,可以很容易的計(jì)算出斜率k舶斧。根據(jù)k欣鳖,再計(jì)算出b。這樣給出這條線段上任意一點(diǎn)x軸坐標(biāo)茴厉,就能輕易的算出y軸坐標(biāo)了泽台。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的起點(diǎn)移動(dòng)到雪山左下角
[leftPath moveToPoint:CGPointMake(0, SCREENSIZE.height-120)];
// 畫(huà)一條線到山頂
[leftPath addLineToPoint:CGPointMake(100, 100)];
// 畫(huà)一條線到右下角->左下角->閉合
[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];
// 開(kāi)始畫(huà)山體沒(méi)有被雪覆蓋的部分
CAShapeLayer *leftSnowbergBody = [[CAShapeLayer alloc] init];
UIBezierPath *leftSnowbergBodyPath = [[UIBezierPath alloc] init];
// 把bezierpath的起點(diǎn)移動(dòng)到雪山左下角相同的位置
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];//畫(huà)圓圈
[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;//設(shè)置虛線
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.小車(chē)車(chē)
CAKeyframeAnimation *ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
ani.path = track.path;//小車(chē)運(yùn)動(dòng)路徑跟軌道路徑統(tǒng)一
ani.duration = duration;
ani.beginTime = beginTime;
ani.repeatCount = CGFLOAT_MAX;
ani.calculationMode = kCAAnimationPaced;//恒速
ani.rotationMode = kCAAnimationRotateAuto;//確保沿路徑運(yùn)動(dòng)
我這里寫(xiě)的都只是皮毛矾缓,大神:非典型技術(shù)宅有好多干貨哦~