#21 ⭐️ 調色大師 (加上亂數和漸層)(feat. 明日方舟Amiya)

讓我們來玩弄一下Amiya吧(?…我是說他的眼睛跟頭髮拉～

Amiya好好玩！(?

以前玩遊戲總是會花很多時間捏黏土人，眼睛頭髮身材高矮胖瘦都可以調成自己喜歡的樣子，不過這邊我只會改顏色｡ﾟヽ(ﾟ´Д`)ﾉﾟ｡

關於slider連動label並且變換顏色沒有什麼特別要敘述的，主要注意RGB必須用CGFloat(Slider為Float)

在隨機變色上用.random來變換隨機數值出來(slider的value是maximum 1，所以範圍就設0…1)，在把他吃進backgroundColor就可以不透過slider而隨機生成顏色

//用.random來設定各個slider的變數
redSlider.value = Float.random(in: 0...1)
greenSlider.value = Float.random(in: 0...1)
blueSlider.value = Float.random(in: 0...1)
alphaSlider.value = Float.random(in: 0...1)
//hairView的背景色跟著slider走
hairView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))

這邊最麻煩的莫過於漸層，首先要將圖片去背化，光這邊我就搞亂了，說是要去背實際上是把欲去背的範圍保留…所以下圖左邊你去掉頭髮跟眼睛之後你就不能拿它來去背了（你沒聽錯，他很繞，要做兩次動作，去背“剩餘”的部分被拿來當遮罩）

看出哪裡差別了嗎？右邊兩張才能拿來用

UIView!UIView!UIView!很重要說三次!

建立新的view(不是ImageView，很重要，連後面的漸層也是)，這裡要讓View跟ImageView大小一樣以防圖面是偏掉的，最後才適用.mask將ImageView裡面眼睛跟頭髮變成遮罩

在漸層方面一樣用segment區分眼睛跟頭髮，除了最主要的colors以外，這邊還多玩了startPoint/endPoint/locations，locations會表現出顏色漸層的多或寡，數字越小代表後面那個顏色會站的版面越多（如下如果是0的話就代表0～1後面的顏色都會是藍色）

gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
gradientLayer.locations = [0.0, NSNumber(value: gradientSlider.value)]

startPoint/endPoint從左上角的(0,0)到右下角的(1,1)

後記

最後還有一個問題沒有解決，不確定為什麼frame跟bounds都設定了但在做漸層的時候會導致下圖的結果，實際漸層的view大小也跟其他大小一樣…還有漸層沒辦法眼睛跟頭髮切割變化（從頭髮切換成眼睛，頭髮的設定會回到red/green/blue/alpha slider的參數）

Reference

#10–1 調色大師

#13 彼得潘的影子 — 調色大師

利用 CAGradientLayer 製作漸層

#13 — 調色大師：七彩彼得潘

#13 莫莉

Github

KrauserHuang/ColorChangePractice