使用ivx實現時間倒退效果的經驗總結

今天要實現一個時間倒退的動畫效果,案例初始時會顯示當前日期,用戶可以從日期選擇器上選擇過去的某一天,開始播放後顯示日期會逐漸倒退至選中日期。主要用到的組件是觸發器,設計思路是將當前日期和選中日期都轉化成時間戳格式,然後通過觸發器不斷改變當前日期的值,直到等於選中日期。

(Unix時間戳是一種時間表示方式,定義爲從格林威治時間1970年01月01日00時00分00秒(北京時間1970年01月01日08時00分00秒)起至現在的總毫秒數)
使用ivx實現時間倒退效果的經驗總結
1.參數
下圖是案例中使用的幾個變量,“當前日期”是存儲2020-04-26格式的當前日期,數值變量“選中日期”和“當前日期轉換時間戳”是對應日期時間戳的值,另外在案例中我們可以設置動畫的時長,所以需要添加一個數值變量“速度”,即觸發器每次觸發的變化量。
使用ivx實現時間倒退效果的經驗總結
2.前臺初始化事件
在案例初始化時,我們獲取系統當前時間的時間戳,從中提取年、月、日展示出來,並將時間戳值保存在“當前日期轉換時間戳”中。
使用ivx實現時間倒退效果的經驗總結
3.選擇日期
這裏使用了拓展組件中的日期選擇器,我們可以選擇過去的任意一天,選取後會將該日期的時間戳賦值給“選中日期”。
使用ivx實現時間倒退效果的經驗總結
4.速度
當輸入框失焦後我們就計算“速度”的值,不過輸入框輸入的速度是以秒爲單位的,而觸發器的時間間隔是0.01秒,所以每次觸發的變量值就是(當前日期-選中日期)/(輸入速度*100)。
使用ivx實現時間倒退效果的經驗總結
5.播放
點擊播放按鈕“Go back”,會先判斷一下輸入框的內容是否爲空,如果爲空進行一個提示,若非空則觸發器開始播放。
使用ivx實現時間倒退效果的經驗總結
6.觸發器
在觸發器的觸發事件裏,我們先判斷當前日期的時間戳減去速度後是否小於選中日期,如果小於則暫停觸發器然後將選中日期的年、月、日提取出來顯示,動畫也就運行結束;如果不是則用當前日期時間戳減去速度,再獲取年、月、日展示出來,這樣循環播放就有了一個時間倒退的效果。
使用ivx實現時間倒退效果的經驗總結

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章