#13 Silder 移動元件_Pokemon Evaloution

Step1:

將所選圖片加入Assets(Preview去背)，並拉出Outlet和Action

Step2:

設定slider的值（代表slider移動的總範圍，由於後續想讓旁邊兩顆球轉動，所以直接設定值為180<轉動一圈360度>），並加上轉動的func，因為我沒有要移動球的位置，就沒有打上translatedBy，讓它自轉起來。

轉動主要參考以下文章：
https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E6%97%8B%E8%BD%89-view-%E7%9A%84%E6%96%B9%E6%B3%95-5deea94fd3a2

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

Step3:

1. 拉出Silder的Action，而view主要以橫移的方式移動，所以先找出兩個view的x讓他加減silder的value
2. 設計圖片的透明度，圖片的alpha值為0~1
3. 最後兩張圖片碰再一起時，也就是silder值最大的時候，兩張圖片能夠透明，並顯示出隱藏的圖片。
   （因為隱藏的程式寫在Silder上，所以剛執行未拉動Silder時會顯示出來，解決方式：1.storyboard上先把view的alpha設置為0 2.viewDidLoad加一行）

移動及圖片透明度參考以下文章：
https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E8%AA%BF%E6%95%B4%E5%85%83%E4%BB%B6%E4%BD%8D%E7%BD%AE%E7%9A%84%E5%9B%9B%E7%A8%AE%E6%96%B9%E6%B3%95-238565e19100
https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E6%95%99%E5%AE%A4/%E8%B8%8F%E4%B8%8A%E6%85%A2%E9%95%B7%E7%9A%84ios%E9%96%8B%E7%99%BC%E5%AD%B8%E7%BF%92%E4%B9%8B%E6%97%85-013-2000bc12f0f5

以下為完整程式碼及GitHub網址:
https://github.com/ji3g4vic/silderPractive

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var seadraView: UIImageView!
    @IBOutlet weak var growlitheView: UIImageView!
    @IBOutlet weak var sealitheView: UIImageView!
    @IBOutlet weak var ballView1: UIImageView!
    @IBOutlet weak var ballView2: UIImageView!
    func updateLocation(degress: CGFloat){
        ballView1.transform = CGAffineTransform.identity.rotated(by: CGFloat.pi / 90 * degress)
        ballView2.transform = CGAffineTransform.identity.rotated(by: CGFloat.pi / 90 * degress)
        
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        sealitheView.alpha = 0
        // Do any additional setup after loading the view.
    }

    @IBAction func ballSilder(_ sender: UISlider) {
        seadraView.frame.origin.x = CGFloat(125+sender.value)
        growlitheView.frame.origin.x = CGFloat(575-sender.value)
        seadraView.alpha = CGFloat(sender.value / 80)
        growlitheView.alpha = CGFloat(sender.value / 80)
        updateLocation(degress: CGFloat(sender.value))
        if sender.value == 180{
            seadraView.alpha = 0
            growlitheView.alpha = 0
            sealitheView.alpha = 1
        }else{
            sealitheView.alpha = 0
        }
    }
    
}