http://sxiaojian.com/2015/11/30/iOS-curve-gradient/
圓形漸變
最近產品提了一個需求,要求進度條的進度可以大于1。效果如下
效果圖上卡厨埋,實際上并不卡。
在開始做之前娃循,看了github上所有的progress相關的代碼,發(fā)現并沒有人實現過這樣的效果。蘋果apple watch應用實現了,但是不知道蘋果是怎么實現的花颗。
這個效果的難度就在于 曲線漸變 和 進度能大于1。
cocoa touch提供的api都是直線漸變惠拭。而進度可以大于1要求曲線的首和尾顏色不能想近扩劝,應該相差最大。
這篇文章實現了一個曲線漸變求橄,但是這個無法實現進度條大于一今野。
最終要想實現曲線漸變只能自己實現了葡公。
顏色的生成
一共需要兩個顏色罐农,起始顏色和結束顏色。中間顏色的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都是直線的蒲凶,我就采取了微分的思想气筋,將一個圓分為無數份,然后每一份繪制一點顏色旋圆。最終就形成了曲線漸變宠默。
最終的實現
直接看代碼吧。demo在此
rounded矩形漸變
這個動畫的實現就更有難度了灵巧。
動畫由兩個CAReplicatorLayer組成搀矫,一個完成前半部分抹沪,一個完成后半部份,兩個layer的屬性完全一致瓤球,僅僅是另外一個layer旋轉了180度。最終效果是這樣卦羡。
一個CAReplicatorLayer的動畫是這樣的
由于stroke end的取值是0-1噪馏,所以無法平滑的讓stroke一直保持一樣的長度。為了實現效果绿饵,我采取的方法是創(chuàng)建一個一樣的CAReplicatorLayer并旋轉180度欠肾。
于是效果變成了這樣
然后在這兩個layer的superLayer添加mask,最終完成了要求的動畫效果蝴罪。
最難的是CAReplicatorLayer的創(chuàng)建董济,我創(chuàng)建了40個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;
里面的參數都經過大量的試錯與微調才調出這個效果要门。