利用CoreGraphics模仿微信運(yùn)動(dòng)折線圖

首先上一張效果圖

在原版的基礎(chǔ)上功茴,斗膽加了點(diǎn)動(dòng)畫(huà)

這里是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)遣铝。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末佑刷,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子酿炸,更是在濱河造成了極大的恐慌瘫絮,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,029評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件填硕,死亡現(xiàn)場(chǎng)離奇詭異麦萤,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)扁眯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)壮莹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人姻檀,你說(shuō)我怎么就攤上這事命满。” “怎么了绣版?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,570評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵胶台,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我杂抽,道長(zhǎng)概作,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,535評(píng)論 1 284
  • 正文 為了忘掉前任默怨,我火速辦了婚禮讯榕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘匙睹。我一直安慰自己愚屁,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,650評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布痕檬。 她就那樣靜靜地躺著霎槐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪梦谜。 梳的紋絲不亂的頭發(fā)上丘跌,一...
    開(kāi)封第一講書(shū)人閱讀 49,850評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音唁桩,去河邊找鬼闭树。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播父虑,決...
    沈念sama閱讀 39,006評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼眼溶,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼碍现!你這毒婦竟也來(lái)了幅疼?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,747評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤昼接,失蹤者是張志新(化名)和其女友劉穎爽篷,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體慢睡,經(jīng)...
    沈念sama閱讀 44,207評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡狼忱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,536評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了一睁。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钻弄。...
    茶點(diǎn)故事閱讀 38,683評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖者吁,靈堂內(nèi)的尸體忽然破棺而出窘俺,到底是詐尸還是另有隱情,我是刑警寧澤复凳,帶...
    沈念sama閱讀 34,342評(píng)論 4 330
  • 正文 年R本政府宣布瘤泪,位于F島的核電站,受9級(jí)特大地震影響育八,放射性物質(zhì)發(fā)生泄漏对途。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,964評(píng)論 3 315
  • 文/蒙蒙 一髓棋、第九天 我趴在偏房一處隱蔽的房頂上張望实檀。 院中可真熱鬧,春花似錦按声、人聲如沸膳犹。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,772評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)须床。三九已至,卻和暖如春渐裂,著一層夾襖步出監(jiān)牢的瞬間豺旬,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,004評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工柒凉, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留族阅,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,401評(píng)論 2 360
  • 正文 我出身青樓扛拨,卻偏偏與公主長(zhǎng)得像耘分,于是被迫代替她去往敵國(guó)和親举塔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子绑警,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,566評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,799評(píng)論 25 707
  • 最近在做群聊功能,使用了環(huán)信的SDK,在環(huán)信demo中無(wú)意之中看到了glide框架,簡(jiǎn)單了解后,發(fā)現(xiàn)這個(gè)框架很強(qiáng)(...
    guggle閱讀 2,146評(píng)論 1 7
  • 孩子求泰,我要和你講一個(gè)故事。 為什么是你计盒?你是這個(gè)王國(guó)最年輕渴频,最有前途的黑魔法師,如果這個(gè)世界上有誰(shuí)想要光明磊落地結(jié)...
    luxyme閱讀 307評(píng)論 0 0
  • 在這淅淅瀝瀝下著雨的冬夜北启,我又想起你卜朗,這噬骨的思念讓我久久不能入睡。千年前的很多個(gè)夜晚咕村,你也是這般輾轉(zhuǎn)難眠场钉。...
    云耳閱讀 582評(píng)論 0 2
  • 許巍喜歡那種自然的創(chuàng)作,音樂(lè)記錄了他的情感與轉(zhuǎn)變懈涛。 曾經(jīng)的你許巍 - 每一刻都是嶄新的 許巍 許巍坐在影院的后臺(tái)逛万,...
    歌手許巍閱讀 814評(píng)論 0 1