Weex-Android實踐（二）：實現Material Design風格Button

這兩天用了weex實現一些功能，不得不說沒有質感的控制項實在是太醜了。沒有觸摸效果，沒有層次的標題欄，顯得Weex做出來的東西看起來不太美觀，歸其原因還是css很多東西支持不了，無法在客戶端上實現，突發奇想用一些最簡單的css樣式來進行實現，看看能不能有一些我在Android裏用慣的Material Design的效果，於是就有了第一篇：Button

一、實現MD的效果

1、陰影效果

完全MD的效果是很難實現的，我們首先要的就是一個最關鍵的東西：陰影，陰影是實現一個有「層次感」的按鈕的關鍵因素，舉個例子，同樣兩張圖，為什麼我們會覺得飛豬的這個界面層次感不夠呢？關鍵就是標題欄的陰影，這也是MD風格中突出層次感的一大法寶。

飛豬

知乎

然後我們看看Button需要的陰影主要在哪裡：（白色會看的更清晰一點）

紅色按鈕效果圖

白色按鈕效果圖

簡單來說，在下部和右側，由於不能用css自帶的效果，我們只能用最傳統的方式：拼接來實現這個效果，我們畫個示意圖。

按鈕陰影示意圖

這個圖中的綠色部分就是陰影位置，並且陰影是從上到校漸變的，由深到淺這樣，然後我們在實現的過程中也可以發現實際上就是三個部分，也就是上、右以及那個角的部分。代碼我只貼出一部分：

注意的是，使用css的時候最好都要查看一些官方文檔，看一下支持哪些效果和寫法，要不然是沒法顯示出效果的，我使用的漸變也是Weex能夠支持的

（1）佈局部分：

<div class="shadow-bottom" :style="mShadowBottom"></div><div class="shadow-right" :style="mShadowRight"></div><div class="shadow-corner" :style="mShadowCorner"></div>

（2）樣式：

.shadow-bottom { background-image: linear-gradient(to bottom,#bdbdbd,#ffffff); position: absolute; top: 95px; left: 2px; width: 293px; height: 5px;}.shadow-corner { background-image: linear-gradient(to bottom right,#bdbdbd,#ffffff); position: absolute; top: 95px; left: 295px; width: 3px; height: 3px;}.shadow-right { background-image: linear-gradient(to right,#bdbdbd,#ffffff); position: absolute; top: 0; left: 295px; width: 5px; height: 95px;}

實現效果：（忽略標題欄，標題欄是playground自帶的）

這裡還加了一點圓角和margin，顏色採用了MD官方的藍色配色，通過陰影起碼能看出一點層次感了。

實現效果真機（Android）

2、按鈕按下效果

MD裏是水波效果，這個目前似乎Weex裏支持的動畫還做不出來（後面慢慢嘗試），暫時只能做加深效果，主要的實現方式是通過加一個透明的「蒙層」，然後在按下的時候讓它變的漸漸不透明，從而做出按下的效果。我們先看一下實現的效果（按下了幾次）：

效果gif

因為官方的動畫有個非常大的問題：開始了不能停止，所以為了實現這個效果，我使用的方式很簡單：interval，這個實際上在Android原生上做動畫效果是異曲同工的，通過任務的形式每個一個固定的時間進行屬性的變動（屬性動畫有沒有），我們看一些實現細節

（1）佈局部分

<div class="shadow" :style="shadowStyle"></div>

（2）屬性

data: ()=> ({ animationOpacity: 0, interval: null, isTouch: false }),...computed: { shadowStyle() { return { opacity: this.animationOpacity, width: this.width-5 } },}

（3）touch監聽和動畫實現

ontouchstart(e) { let self = this; if (this.isTouch) { return; } else { this.isTouch = true; } let timesRun = 0; self.interval = setInterval(function() { timesRun += 1; self.animationOpacity += 0.01; if (timesRun === 15) { clearInterval(self,interval); } }, 30); },