UIButton 背景色漸變動畫

2021-09-13 19:46:15 字數 3338 閱讀 4348

專案有個需求需要uibutton上的背景色是漸變動畫的效果，如下。

cagradientlayer 用於實現漸變效果，cabasicanimation用於對layer做動畫

原始碼:

看gif圖我們發現動畫是從右到左，顏色一直漸變向左滑動的，把效果拆解下，可以分為兩部分：

實現顏色的階梯變化

對實現的階梯顏色做動畫

初始化乙個cagradientlayer，他的frame的寬高和uibutton的一致。

var cagradientlayer = cagradientlayer()


cagradientlayer?.frame = cgrect(x: 0, y: 0, width: 200, height: 50)
cagradientlayer涉及到乙個座標，該座標體系以左上角為圓點（0，0），右下角為終點（1，1）

cagradientlayer的startpoint是繪製階級顏色的起始點，對應的endpoint為繪製階級顏色的終點

cagradientlayer?.startpoint = cgpoint(x: 0, y: 0)


cagradientlayer?.endpoint = cgpoint(x: 1, y: 0)
定義個顏色座標組，用於為繪製提供顏色,colors是所有變色的顏色組，另外定義乙個變數colors2，用於按鈕上一次只對兩個顏色做漸變

let colors = [


uicolor.init(red: 162/255, green: 94/255, blue: 255/255, alpha: 1).cgcolor,


uicolor.init(red: 108/255, green: 153/255, blue: 255/255, alpha: 1).cgcolor,


uicolor.init(red: 105/255, green: 201/255, blue: 255/255, alpha: 1).cgcolor,


uicolor.init(red: 102/255, green: 235/255, blue: 221/255, alpha: 1).cgcolor,


uicolor.init(red: 103/255, green: 249/255, blue: 145/255, alpha: 1).cgcolor,


uicolor.init(red: 228/255, green: 250/255, blue: 139/255, alpha: 1).cgcolor,


uicolor.init(red: 255/255, green: 198/255, blue: 88/255, alpha: 1).cgcolor,


uicolor.init(red: 255/255, green: 120/255, blue: 102/255, alpha: 1).cgcolor,


uicolor.init(red: 162/255, green: 94/255, blue: 255/255, alpha: 1).cgcolor


]let colors2 = [colors[0],colors[1]]


cagradientlayer?.colors = colors2
把cagradientlayer放在uibutton上的layer層

colorbutton.layer.addsublayer(cagradientlayer!)
至此，已經對uibutton做了顏色漸變

動畫我們用cabasicanimation，對layer層做動畫。

定義乙個progress用於記錄顏色的下標，startcolors記錄動畫開始時的顏色組，endcolors記錄動畫結束時的顏色組。

var colorarray = cagradientlayer?.colors


if endcolors != nil
每次啟動動畫時，我們先把colorarray移除掉第乙個顏色，然後在colors中選擇下標為progress+2的顏色，把該顏色追加到colorarray中。

colorarray?.removefirst()


endcolors = colorarray
比如有a、b、c、d、e這幾種顏色，顏色漸變是按照ab、bc、cd、de這個順序執行，這樣保障了顏色順暢的向左移動
建立動畫如下

let animation = cabasicanimation(keypath: "colors")


animation.fromvalue = startcolors


animation.tovalue = endcolors


animation.duration = 1


animation.fillmode = kcafillmodeforwards


animation.isremovedoncompletion = false


animation.delegate = self


cagradientlayer?.add(animation, forkey: "animategradient")
通過fillmode設定為kcafillmodeforwards、isremovedoncompletion設定為false，保證了乙個動畫結束後，不再恢復到原狀態，顏色組之間的切換會比較順暢。
最後一步是監聽動畫的結束，當動畫結束時，我們應該立馬改變cagradientlayer中的顏色值，以及progress，並啟動新的動畫

func animationdidstop(_ anim: caanimation, finished flag: bool) 


}

iOS UIView背景色漸變

uiview theview uiview alloc initwithframe self headerbackimgview frame self headerview addsubview theview 初始化 cagradientlayer 物件，使它的大小為 uiview 的大小 cag...

DIV背景色漸變

ie下 filter alpha opacity 100 finishopacity 100 style 1,startx 0,starty 0,finishx 100,finishy 50 progid dximagetransform.microsoft.gradient startcolors...

背景色漸變處理 linear gradient

處理各個瀏覽器間的相容，背景色漸變 background moz linear gradient top,0192ed 0 0baeb3 100 background webkit gradient linear,left top,left bottom,color stop 0 0192ed co...