首先上一張效果圖
這里是Demo的地址(地址),如果能夠幫到你的話蟀苛,請(qǐng)大爺上賞一個(gè)Star再走吧撤蚊。
折線圖結(jié)構(gòu)
底部漸變層????CAGradientLayer
上中下的三條線條為CAShapeLayer
折線圖有四層CALayer
? ? 最底層CAShaper奕短,用于控制Frame來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果
? ? 折線內(nèi)容部分的漸變層宜肉,CAGradientLayer。
? ? 折線翎碑,CAShapeLayer
? ? 轉(zhuǎn)折點(diǎn),CAShapeLayer
如何實(shí)現(xiàn)不規(guī)整的漸變
? ? 我這里使用的是layer的mask實(shí)現(xiàn)的裁剪
CAShapeLayer *clipLayer = [CAShapeLayer layer];
clipLayer.path = clipPath;
CGPathRelease(clipPath);
self.white2ClearLayer.mask = clipLayer;
注意
因?yàn)閏lipLayer是white2ClearLayer的mask谬返,所以clipLayer的path中的點(diǎn)一定是以white2ClearLayer為基準(zhǔn)的,然后path必須為一個(gè)閉合的路徑日杈,折線圖其它的地方都可以非常簡(jiǎn)單的實(shí)現(xiàn)遣铝。