今天咱們使用小模塊來製做一個倒計時播放器,要求可以輸入倒計時的時長,控制倒計時播放器的暫停與播放,而且能夠重置狀態從新計時。ide
一.公共數據動畫
因爲是倒計時器,因此咱們添加一個數值變量保存倒計時長,而且與小模塊內部用於展現的文本組件直接進行數據綁定。
二.公共動做3d
這類倒計時的動畫效果咱們通常都是經過觸發器實現的,例如本案例中能夠設置觸發器每隔一秒觸發一次,每次觸發令倒計時長減1來達成效果,而控制倒計時器的播放、暫定和重置也都是對觸發器和倒計時長執行某些動做。blog
1.顯示和隱藏
這兩個動做比較簡單,只是簡單的讓組件顯示和隱藏。
2.開始與暫停
開始動做中,咱們先對倒計時長作一個判斷,若是當前時長還大於0,那麼就能夠繼續令觸發器播放,暫停動做則是直接暫停觸發器。it
3.重置
重置動做則須要咱們重置觸發器狀態,將倒計時長歸0而且更新當前數據至小模塊。class
三.外部組件調用小模塊變量
1.設置倒計時長的步驟是先點擊Setup time按鈕顯示時間設置橫幅,在輸入框內輸入一個正整數,而後點擊Confirm,若是輸入無誤就會將輸入數值賦值到小模塊的公共數據倒計時長中並隱藏時間設置橫幅,這時就能夠播放倒計時了。
2.執行顯示和隱藏的動做時咱們須要在外部添加一個布爾值變量保存當前的小模塊顯隱狀態,並根據這個值來判斷執行顯示仍是隱藏的操做,最後要注意每次執行動做後改變布爾變量的值。
3.開始、暫停和重置這三個功能咱們直接點擊外部按鈕令小模塊執行公共方法中的動做便可。方法