http://sxiaojian.com/2015/11/30/iOS-curve-gradient/
圓形漸變
最近產(chǎn)品提了一個(gè)需求，要求進(jìn)度條的進(jìn)度可以大于1。效果如下
效果圖上卡，實(shí)際上并不卡。
在開(kāi)始做之前，看了github上所有的progress相關(guān)的代碼，發(fā)現(xiàn)并沒(méi)有人實(shí)現(xiàn)過(guò)這樣的效果。蘋果apple watch應(yīng)用實(shí)現(xiàn)了，但是不知道蘋果是怎么實(shí)現(xiàn)的。
這個(gè)效果的難度就在于 曲線漸變 和 進(jìn)度能大于1。
cocoa touch提供的api都是直線漸變。而進(jìn)度可以大于1要求曲線的首和尾顏色不能想近，應(yīng)該相差最大。
iOS實(shí)現(xiàn)一個(gè)顏色漸變的弧形進(jìn)度條
這篇文章實(shí)現(xiàn)了一個(gè)曲線漸變，但是這個(gè)無(wú)法實(shí)現(xiàn)進(jìn)度條大于一。
最終要想實(shí)現(xiàn)曲線漸變只能自己實(shí)現(xiàn)了。
顏色的生成
一共需要兩個(gè)顏色，起始顏色和結(jié)束顏色。中間顏色的R、G、B值由progress線性生成。
CGFloat ratio =(float)i /(float)sectors;CGFloat R = beginR +(endR- beginR)* ratio;CGFloat G = beginG +(endG- beginG)* ratio;CGFloat B = beginB +(endB- beginB)* ratio;
漸變的生成
由于apple提供的api都是直線的，我就采取了微分的思想，將一個(gè)圓分為無(wú)數(shù)份，然后每一份繪制一點(diǎn)顏色。最終就形成了曲線漸變。
最終的實(shí)現(xiàn)
直接看代碼吧。demo在此
rounded矩形漸變
這個(gè)動(dòng)畫的實(shí)現(xiàn)就更有難度了。
動(dòng)畫由兩個(gè)CAReplicatorLayer組成，一個(gè)完成前半部分，一個(gè)完成后半部份，兩個(gè)layer的屬性完全一致，僅僅是另外一個(gè)layer旋轉(zhuǎn)了180度。最終效果是這樣。
一個(gè)CAReplicatorLayer的動(dòng)畫是這樣的
由于stroke end的取值是0-1，所以無(wú)法平滑的讓stroke一直保持一樣的長(zhǎng)度。為了實(shí)現(xiàn)效果，我采取的方法是創(chuàng)建一個(gè)一樣的CAReplicatorLayer并旋轉(zhuǎn)180度。
于是效果變成了這樣
然后在這兩個(gè)layer的superLayer添加mask，最終完成了要求的動(dòng)畫效果。
最難的是CAReplicatorLayer的創(chuàng)建，我創(chuàng)建了40個(gè)instance。
replicator.instanceCount? ? ? = 40;replicator.instanceDelay? ? ? = 0.01;replicator.instanceColor? ? ? = [UIColor colorWithRed:1 green: 0.373 blue:0 alpha:0.99].CGColor;replicator.instanceRedOffset? = 0.005;replicator.instanceGreenOffset = 0.005;replicator.instanceBlueOffset? = 0.005;replicator.instanceAlphaOffset = -0.03;replicator.instanceTransform? = CATransform3DIdentity;
里面的參數(shù)都經(jīng)過(guò)大量的試錯(cuò)與微調(diào)才調(diào)出這個(gè)效果。
