今日目標: 了解Ripple效果並包裝成img-ripple元件

分享Polymer 20幾天，是該來談談 Google 今年推出的 Material Design , 今天分享 Ripple元件與使用方式

如果還不知道Material Design，可以先看看這影片

簡單說，這就是Google提倡的UI設計準則，所以可以看到這幾個月來 Google+ 、Google Paly 甚至是新版的Android L都是使用 Material Deisgn 做為UI呈現的重要原則

[線上試玩]

paper-ripple 效果是Material Design其中一個准則，Material Design設計意念是回到初衷，從紙、筆做為發想的起點。當我們拿筆在紙上寫的時候，會有觸感回饋。ripple就是為了做到這樣的感覺，所以當UI支援 ripple效果後，不管是用滑鼠點擊、手指觸碰，都會從點擊的中心點產生漣漪

[線上試玩]

Google今年推Material Design時，就用Polymer包裝了很多元件，大伙可以直接到官網玩玩看，這裡我們先來了解paper-ripple的用法

Polymer 在Google I/O 2014 Keynote 登場~

<paper-ripple> 使用方式

===================

放到指定元素肚子裡就可以了，例如HTML裡面有個div元素，你想要點選此div時，產生漣漪效果，那麼寫法如下

[Github]

網頁試玩後會發現，如果在div邊界點選，漣漪會跑到外面去，如果你不想要這個效果，就在div css上加上 position:relative 就可以避免

加上 position:relative 的效果

<paper-ripple> 除了提供兩種漣漪效果 (recenteringTouch、cicle) 外，也可以設定漣漪的顏色、速度、透明度，下面這個範例設定了不同的參數，可以玩看看

[線上試玩] **** [Github]

如果你想要不需要點選，自己產生漣漪效果，那可以透過 downAction、upAction這兩個方法來實現

[線上試玩] [Github]

第21行 設定漣漪效果的顏色

第31行 等元件ready後在開始亂數點擊

<img-ripple> 自定標籤

==================

使用方式

當想要將既有的img圖片，加上ripple效果，只要放到 <img-ripple>肚子裡就可以了，另外img-ripple也會加上paper疊層效果 (就是圖片底下有陰影)

[線上試玩] [Github]

<img-ripple>為了將img改成background來顯示，在第25行使用到attached callback function，這方法是polymer定義當元件內部的HTML元素附加上去時會觸發，實作此方法我們就可以接手處理圖片位置

參考資料

=======

• paper-ripple project
• Material Design