Slider練習｜愛你最好的距離

*拉IBOutlet & IBAction

因疫情關係，上半年許多婚禮都被迫往後延，下半年大家卯起來送紅色炸彈💖配上幸福感滿分的冬季12月，真的覺得豪～幸～福～吶～

📣 親下去！親下去！親下去！

🌟畫面包含：
・漸層色背景
・水平移動的戀人
・垂直上升的粉紅泡泡
・漸出的愛心
・半圓飛行的鴿子

CAGradientLayer 漸層色背景（可參考此篇）

另外，先前都是使用 addSubLayer 層層逐一加上，此次使用 insertSublayer(gradientLayer, at: 0) 讓Layer直接置於底層。

利用 viewDidLoad 客製 App 畫面

//漸層背景色
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
gradientLayer.colors = [
UIColor(red: 1, green: 175/255, blue: 189/255, alpha: 0.6).cgColor,
UIColor(red: 1, green: 195/255, blue: 160/255, alpha: 0.6).cgColor
]
//insertSubLayer置於最底層，如是使addSubLayer將置於頂層。
view.layer.insertSublayer(gradientLayer, at: 0)

進入本文重點 ［ Slider ］

欲使元件繞圓移動，請務必！務必！務必！將slider數值直接調整為360啊～～ 不然會像我深陷頭痛的深淵啊 (哈哈哈，不信你試試)

水平移動的戀人

・sender.value為slider設定的數值(360)
・水平移動只需改變 x 位置 origin.x
・＝CGFloat(圖片移動起點之x位置+速度)

@IBAction func slider(_ sender: UISlider) {
//設定移動速度
let speed = sender.value * 0.3
//水平移動設定(+:左至右, -:右至左)
female.frame.origin.x = CGFloat(152+speed)
male.frame.origin.x = CGFloat(496-speed)

垂直上升的粉紅泡泡

・直線上升移動只需改變 x 位置 origin.x
・＝CGFloat(圖片移動起點之y位置+速度)

為什麼要/2,3,4,5?
希望粉紅泡泡上升速度再更慢些

//泡泡垂直移動(+:上至下, -:下至上)
bubble1.frame.origin.y = CGFloat(189-speed/4)
bubble2.frame.origin.y = CGFloat(5-speed/3)
bubble3.frame.origin.y = CGFloat(20-speed/5)
bubble4.frame.origin.y = CGFloat(278-speed/2)

漸出的愛心

設定圖片alpha使圖片漸出效果

//愛心透明度
heart.alpha = CGFloat(sender.value/360)

CGAffineTransform半圓飛行的鴿子

使用 func updateLocation 設定圖片的 transform，先用 rotated 旋轉再用 translatedBy 讓 y 位移。

iOS App 讓元件繞圓移動的方法

🌟以鳥的位置為圓形中心點：
rotated(by: CGFloat.pi / 180 * degrees) 讓鳥繞著圓旋轉。
translatedBy(x: 0, y: -230)將讓鳥移動到圓的上方。(-230 是愛心圓的半徑，正230為圓下方)

圖左：鳥飛圓形
圖右：鳥飛半圓形

到底是誰家的鳥能這樣飛啦！

//設定圖片旋轉、移動
func updateLocation(degrees: CGFloat) {
bird.transform = CGAffineTransform.identity.rotated(by: CGFloat.pi/180*degrees).translatedBy(x: 0, y: -230)
}
@IBAction func slider(_ sender: UISlider) {
//鳥飛半圓形sender.value/2，若飛圓形無需/2
updateLocation(degrees: CGFloat(sender.value/2)+270)
}
override func viewDidLoad() {
super.viewDidLoad()
//設定鳥飛行起點
updateLocation(degrees: 270)
}

GitHub

betty-pan/W6-slider