#41 10YearChallenge，兔兔成長匆匆那一年
兔兔的成長很快，半年就轉大人，可以用一年份來做紀錄。
本來做了一份自己的十年照片，但是自動播放一直有bug…
這時候養的是另外一隻兔子，養了十年，之後變成小天使了👼。
兔兔匆匆那一年
後來乾脆換成年年的一年份照片，兔兔的生命很短暫，最多8~10歲，6個月就已經是大人了。
所以以月份為單位，會發現兔子像吹氣球一樣，一下子就長大了
看看下圖！三月到四月中間的底發生什麼事？
突然就長大了呀！這只是一個月的時間～從小蕃薯變成少女
基本會寫到的功能
- 使用 date picker & slider 做時間的魔法師，顯示兔兔一年的變化成長。
- date picker 設定最小 & 最大時間，讓時間的範圍為 2018~ 2019。
- 滑動 slider 時，slider 會停在整數的位置，比方滑到 2018.6.16 時會四捨五入到 2018.6.1。
- slider & picker 要連動，比方 slider 滑到 2018，picker 也要顯示 2018。
建立IBOutlet：
- 顯示照片的 UIImageView
- 表示日期的 UIDatePicker
- 拉動使圖片更換的 UISlider
- 顯示時間的 UILabel
建立IBAction：
- UIDatePicker 選擇日期時，照片對應日期同步顯示
- UISlider 拉動時，照片對應日期同步顯示
- UISwitch 是否自動播放照片，連動UIDatePicker, UISlider
定義變數
let dateFormatter = DateFormatter()
var dateString:String = "2018/02/01"
var timer:Timer?
var imageNumber = 0
var sliderNumber = 0指定特定時間生成 Date
將日期格式化成本地的年/月/日
dateFormatter.dateFormat = “yyyy/MM/dd”
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "yyyy/MM/dd"
let dateString = "2018/02/07"
let date = dateFormatter.date(from: dateString)照片的陣列
用陣列儲存欲顯示的照片
let photosArray = [
"2018-02-1", "2018-03-1", "2018-04-1", "2018-05-1", "2018-06-1", "2018-07-1", "2018-08-1", "2018-09-1", "2018-10-1","2018-11-1", "2018-12-1","2019-01-1"
]檔名注意：
這邊注意原本照片的檔名是 2018-02-01
拉進 Xcode 之後，日期前面的 0 會被自動改寫 變成 2018-02-1如果沒注意檔名可能會跟陣列搭不起來
使用switch做選擇照片的連續數值判斷
因為我的照片是以月為單位，所以要輸出月日的文字
yearLabel.text = "\(year)-\(month)-\(day)"
func choosePhoto(num1:Int){
switch num1 {
case 0:
dateString = "2018/02/01"
case 1:
dateString = "2018/03/01"
case 2:
dateString = "2018/04/01"
case 3:
dateString = "2018/05/01"
case 4:
dateString = "2018/06/01"
case 5:
dateString = "2018/07/01"
case 6:
dateString = "2018/08/01"
case 7:
dateString = "2018/09/01"
case 8:
dateString = "2018/10/01"
case 9:
dateString = "2018/11/01"
case 10:
dateString = "2018/12/01"
default:
dateString = "2019/01/01"
}
//使datePicker顯示之日期為dateString內的字串
let date = dateFormatter.date(from: dateString)
datePicker.date = date!
let dateComponents = Calendar.current.dateComponents(in: TimeZone.current, from: datePicker.date)
let year = dateComponents.year!
var month = dateComponents.month!
let day = dateComponents.day!
month -= 1
yearLabel.text = "\(year)-\(month)-\(day)"
}用 if eles, 比對Array內的照片
讓照片與slider可以連動
func compare() {
if imageNumber >= photosArray.count{
imageNumber = 0
choosePhoto(num1: imageNumber)
photoImageView.image = UIImage(named: photosArray[imageNumber])
}else{
choosePhoto(num1: imageNumber)
photoImageView.image = UIImage(named: photosArray[imageNumber])
}
//連動slider
dateSlider.value = Float(imageNumber)
imageNumber += 1
}計時器
每秒執行一次compare 使圖片跑起來
func time() {
timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: {(timer) in
self.compare()
})
}自動播放
偵測 Switch 鈕是 On 狀態時就會開始自動播放
@IBAction func autoPlay(_ sender: UISwitch) {
if sender.isOn{
time()
imageNumber = sliderNumber
dateSlider.value = Float(imageNumber)
}else{
timer?.invalidate()
}
}日期選選取器 Date Picker
Preferred Style 選擇樣式為 Wheels
Date 可以自訂日期區間，這邊我設定有照片的日期為 2018/2/1~2019/01/01
在這個日期區間之外的，禁止選取
@IBAction func chageDate(_ sender: UIDatePicker) {
//取得datePicker的日期
let photoDate = datePicker.date
let dateComponents = Calendar.current.dateComponents(in: TimeZone.current, from: photoDate)
let year = dateComponents.year!
//let pictureDate = "\(year)"
var month = dateComponents.month!
let day = dateComponents.day!
//Array由0開始，因此月份需-1
month -= 1
photoImageView.image = UIImage(named: photosArray[month])
//連動slider
dateSlider.value = Float(month)
yearLabel.text = "\(year)-\(month)-\(day)"
}紀錄遇到的問題：
這裡除 Bug 花了些時，現在作業越來越難了，完成速度變慢
1. Auto Play 時只會出現年份
自動播放時，只有年份沒有月份
研究了很久，月跟日一直沒顯示，後來不斷查詢才發現寫錯地方
一直把它寫在 autoPlay 裡測試，結果是要寫在 choosePhoto 裡
2. 轉日曆時，照片不會跟著動
自動播放與 Slider 拉動時照面顯示正常，但是轉日曆時，照片不會跟著動
原因是改過檔名的關係，圖片在 Xcode 裡修改過名字，但是 Assets 的資料夾裡卻沒有同步更新修改導致出錯，所以陣列裡的名稱沒有一致，導致不會連動。會不一致我想可能跟我的檔案放在 iCloud 上有關，來不及更新。
所以要改檔名時，最好是先把 Xcode 裡的檔案刪掉，在外面把檔名改好之後重新拉進去 Xcode。
動畫展示
看了這個動畫之後越發覺得兔兔長得好快，一個不注意就長大
我的呆萌小女孩一下就變少女了😭
