踏上慢長的IOS開發學習之旅 #013

用 slider 移動元件 & Button 移動練習

隨者之前名偵探柯南最新電影版上映，最近話題又開始流行起來，討論劇劇情猜想黑衣組織BOSS到底是誰等…我也很瘋狂的把動漫從第一集開始複習，剛好就拿來當這次作業的題材囉。大致上構想是第一集的劇情，琴酒餵藥給工藤新一，然後變成柯南的過程。

Step1.
把需要的素材的圖片加入Assets，把構想的圖片位置和Slider加到View裡，就可以來拉IBAction跟IBOutlet的線，順手一起改了Max和Min的圖案。

Steep2.
圖片拉IBOutlet，Slider拉IBAction，檢查有沒有拉錯或少拉。

Step3.
設定Slider讓琴酒移動接觸新一，位置從X=73開始移動，運氣很好拉到底剛好可碰到，不用再設定移動速度調整。

Step4.
原本想偷懶把藥丸跟琴酒一樣用水平移動方式接觸新一，但這樣有點簡單無聊，所以參考了許多同學的做法練習採用繞圓移動方式。先把藥丸圖片放在兩者之間，抓出位置是Y＝-172，圓的半徑就是172。然後建立Func用CGAffineTransform定位中心。然後構想是用藥丸用拋物半圓從左到右，這邊卡了很久，角度要在viewDidLoad這邊設定270度才藥丸圖片才會一開始在水平左邊，設0度會在中間正上方。接者設定Slider，由於一開始把Max值設定360所以繞半圓只需要一半，所以直接除2加上開始的270度，就能把位置控制水平右邊位置。

Step.5
最後想讓琴酒、藥丸和新一碰在一塊時，一起消失然後出現柯南。所以建立新學到的if，假設拉到最大值360的話琴酒、藥丸和新一的alpha=0消失，柯南的alpha=1出現，反之。由於一開始就把柯南的圖片加入view裡，所以每次跑模擬器時一開始拉Slider前都會短暫出現滑動才會消失，想了很久，解決方式在viewDidLoad裡先把柯南的alpha=0打上去就不會出現了。

完整程式碼

import UIKit

class ViewController: UIViewController {
@IBOutlet weak var ginview: UIImageView!
@IBOutlet weak var Shinichiview: UIImageView!
@IBOutlet weak var pillview: UIImageView!
@IBOutlet weak var conanview: UIImageView!

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
pillImageLotateLocation(degree: 270)
conanview.alpha = 0
}
func pillImageLotateLocation(degree:CGFloat){pillview.transform = CGAffineTransform.identity.rotated(by:   CGFloat.pi/180*degree).translatedBy(x: 0, y: -172)
}
@IBAction func slider(_ sender: UISlider) {
ginview.frame.origin.x = CGFloat(73 + sender.value)
pillImageLotateLocation(degree: CGFloat(sender.value/2 + 270))
if sender.value == 360 {
ginview.alpha = 0
Shinichiview.alpha = 0
pillview.alpha = 0
conanview.alpha = 1
}else {
ginview.alpha = 1
Shinichiview.alpha = 1
pillview.alpha = 1
conanview.alpha = 0
}
}
}