熊貓維納斯的誕生

APP classwork#7 Slider 練習

Reemplazar a los humanos con pandas en icónicas pinturas es lo que el arte estaba pidiendo a gritos

藝術名作常會被善心人士做 Kuso 的表現，無意間發現這位 Kusopanda 真是太深得我心，所以就找了這幅熊貓維納斯的誕生來做 Slider 的練習 😅

Slider 練習過程

1.首先用 PhotoShop Bath 完美去背，留下三位主角後，再找一張合適底圖做油畫筆觸處理並把熊貓維納斯留在底圖上，將左風神、右花神轉存 PNG。

2.接著拉出一個 Slider 並定義為 UISlider；再將 Slider，左風神、右花神拉 IBOutlet；此外，再定義左風神、右花神的起始位置。

@IBOutlet weak var fliSlider: UISlider!
@IBOutlet weak var rightview: UIImageView!
@IBOutlet weak var leftview: UIImageView!
var leftViewOriginX: CGFloat?
var rightViewOriginX: CGFloat?

3.開始設定左風神、右花神的滑動效果。

leftview.frame = CGRect(x: leftViewOriginX! + CGFloat(sender.value), y: leftview.frame.origin.y, width: leftview.frame.width, height: leftview.frame.height)
rightview.frame = CGRect(x: rightViewOriginX! — CGFloat(sender.value), y: rightview.frame.origin.y, width: rightview.frame.width, height: rightview.frame.height)

4.位置動態調好後，可以針對左風神、右花神的 Slider 變化值換算成 Alpha 值(0~1)；記得 Image View 的 Alpha 起始值也要調成 0。

leftview.alpha = CGFloat( sender.value / sender.maximumValue)
rightview.alpha = CGFloat( sender.value / sender.maximumValue)

本次練習程式

import UIKit
class ViewController: UIViewController {
@IBOutlet weak var fliSlider: UISlider!
@IBOutlet weak var rightview: UIImageView!
@IBOutlet weak var leftview: UIImageView!
var leftViewOriginX: CGFloat?
var rightViewOriginX: CGFloat?
override func viewDidLoad() {
super.viewDidLoad()
leftViewOriginX = leftview.frame.origin.x
rightViewOriginX = rightview.frame.origin.x
// Do any additional setup after loading the view.
}
@IBAction func sliderChange(_ sender: UISlider) {leftview.frame = CGRect(x: leftViewOriginX! + CGFloat(sender.value), y: leftview.frame.origin.y, width: leftview.frame.width, height: leftview.frame.height)
rightview.frame = CGRect(x: rightViewOriginX! — CGFloat(sender.value), y: rightview.frame.origin.y, width: rightview.frame.width, height: rightview.frame.height)
leftview.alpha = CGFloat( sender.value / sender.maximumValue)
rightview.alpha = CGFloat( sender.value / sender.maximumValue)

🎁 好物推薦：

在本次練習中發現一個實用工具 Monosnap：介面簡單易上手，基本可以框選截圖外，還能針對截圖用附屬小工具來拉箭頭、上文字等等，重點還幫忙自動去背加陰影，很貼心的懶人美化工具；除此之外，螢幕錄製也相當方便，可以自由選擇輸出檔案大小轉存 MP4 或 Gif 檔。唯一缺點就是沒有支援中文版本，總之不用白不用，用了不吃虧。

‎Monosnap - screenshot editor

📝 練習中解惑小貼士：

100道iOSApp謎題#54 愛你最好的距離 ? slider 練習

#54 愛你最好的距離 ? slider 練習