Slider練習|愛你最好的距離
*拉IBOutlet & IBAction
因疫情關係,上半年許多婚禮都被迫往後延,下半年大家卯起來送紅色炸彈💖配上幸福感滿分的冬季12月,真的覺得豪~幸~福~吶~
📣 親下去!親下去!親下去!
🌟畫面包含:
・漸層色背景
・水平移動的戀人
・垂直上升的粉紅泡泡
・漸出的愛心
・半圓飛行的鴿子
CAGradientLayer 漸層色背景(可參考此篇)
另外,先前都是使用 addSubLayer 層層逐一加上,此次使用 insertSublayer(gradientLayer, at: 0) 讓Layer直接置於底層。
//漸層背景色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 位移。
🌟以鳥的位置為圓形中心點: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