使用ivx製做移動端抽屜信息框的經驗總結

以前的帖子裏已經詳細說了彈窗和睦泡確認框是如何實現的，今天再補充一種用於移動端的抽屜信息框。它多用於一些輕量和低頻率的交互，好比用戶須要提交一些信息卻又不會頻繁使用這部分功能，這種狀況下去跳轉頁面會使操做流程更加繁瑣，咱們就能夠製做一個抽屜信息框。平時抽屜信息框是隱藏的，能夠節省主頁面的空間展現更加劇要的內容，當須要進行操做時就讓抽屜從屏幕側面滑出，在抽屜信息框中操做完成後再將其從新隱藏。

1.組件結構
佈局上則能夠分爲三個部分，列1 ，背景對象組和抽屜表單對象組。列1是案例的主頁內容，這裏只是放置了一個按鈕用於顯示抽屜信息框，抽屜表單中上方是三個輸入項，底部是兩個操做按鈕，同時對象組內還有一個軌跡組件，關於它咱們在第二點再詳細介紹。背景對象組只是作一個蒙層的效果，因此寬高都綁定了兩個變量，使對象組能鋪滿整個屏幕。


案例中兩個變量的做用是在初始化或者設備寬高變化時獲取設備的實時寬高，而後去設置列1的寬高使之佔滿整個屏幕。

2.軌跡
首先選中抽屜表單對象組，添加一個軌跡組件。顧名思義，軌跡指的是一個運動的過程，添加在抽屜表單對象組下的軌跡控制的天然就是抽屜表單這個對象組運動的過程。

開始顯示和結束顯示是爲了在所設置的原始時長的時間內，進一步設置軌跡對應的對象的顯示與隱藏的時段，同時還能夠設置是否自動播放循環播放，而原始時長，實際時長和播放速度的關係是 ：原始時長x播放速度=實際時長。下面的時間軸就是設置軌跡的具體運動狀況。

在軌跡的時間軸上咱們能夠點擊黃色的加號添加一個關鍵幀，並在前面的時間框裏設置關鍵幀的具體時間點，選中一個關鍵幀（選中的關鍵幀會從灰色變成黃色）後黃色的加號會變成減號，點擊後就能夠刪除選中的關鍵幀。

並且當咱們選中一個關鍵幀的時候能夠看見屬性欄就是抽屜表單對象組的屬性欄。咱們選中軌跡0秒時的關鍵幀並設置此時抽屜表單對象組的X座標是-240。

再選中0.3秒時的關鍵幀並設置此時抽屜表單的對象組的X座標是0。

這樣當軌跡運行時，抽屜表單對象組就在0.3秒內向右移動了240px，而選中抽屜表單，能夠發現其自己的屬性是X座標-240，寬度240px。整個對象組也就正好是從屏幕外側移動到了屏幕內部並顯示在最左側。（嗯，一切都不過是算計罷了，每一個像素都被算計的清清楚楚）

3.事件邏輯
首先就是讓軌跡顯示，給Open按鈕添加一個點擊事件讓軌跡播放至0.3s也就是讓抽屜表單對象組X座標爲0的那一刻，而後保持這一刻的狀態。以後讓背景蒙層顯示。


而後點擊cancel按鈕或者蒙層區域能夠取消操做，讓抽屜信息框的軌跡反向播放從X座標爲0退回到X座標爲-240的位置，而後讓蒙層也從新隱藏。

點擊submit按鈕，能夠提交表單操做，例如將三個輸入框的內容提交到數據庫，而後讓抽屜信息框回到原位置而且蒙層從新隱藏。

總結
今天的抽屜信息框主要是結合了軌跡實現的，這提示了咱們基本功必定要紮實，要了解並熟練掌握每個基本組件，只有這樣咱們才能創造出更多的展現效果，實現更多的邏輯功能。畢竟，只有本身有了必定量的積累以後，纔可以去創造，創新。