今天我們來說說小程序的 UX (或者說：微交互)。團隊的技術(shù)水平?jīng)Q定產(chǎn)品的下限，對微交互的極致追求決定了產(chǎn)品的上限。

　　舉個簡單的例子：我們在使用 wx,showModal(obj) 、并且交互層級分明的情況下，可以給底層加一個 「高斯模糊」，例如：

　　.blur {filter: blur(6rpx);}

　　有時候幾行簡單的代碼就能給一款產(chǎn)品帶來高一個層次的體驗。

　　下面說我們今天的重頭戲，為微信小程序定制的 css3 動效庫 Ripples.wxss

　　希望大家不要吝惜自己的 star~ 。

　　聲明：其中大部分動效來自 Animate.css

　　安裝

　　如果你的微信小程序項目基于 nodejs 開發(fā)，你可以使用 npm 安裝，并拷貝到相關(guān)目錄后 @import "path/ripples.min.wxss"

　　npm install ripples.wxss --save

　　或直接 clone \ download 倉庫https://github.com/jeasonstudio/Ripples.wxss.git，拷貝 ripples.wxss 或 ripples.min.wxss到相關(guān)目錄后 @import "path/ripples.min.wxss"。

　　使用

　　首先在你想引入 「Ripples.wxss」 動效的 「element」 上加 「ripple」 class。

　　如果你想讓他循環(huán)不斷播放，請?zhí)砑?「infinite」 class。

　　element

　　接下來你需要再添加如下你需要的 class (例如上面例子中的 「bounce」)、相應(yīng) class 列表可參考 這里，或者 Animate.css

　　使用實例

　　你可以查看根目錄下的 DEMO 項目，為所有 Ripples.wxss 的綜合展示，如圖：

　　(此圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系刪除! )

　　也可以參考如下的例子：

　　//imdex.js

　　Page({

　　data: {

　　bounceShow: false

　　},

　　showBounce: function () {

　　let that = this

　　that.setData({

　　bounceShow: true

　　})

　　setTimeout(function() {

　　that.setData({

　　bounceShow: false

　　}, 2000)

　　})

　　}}

　　/* imdex.wxss */

　　@import "ripples.wxss";

　　bounce

　　不同場景下的使用邏輯還請自行斟酌

　　個性化引入

　　Ripple.wxss 使用 gulp 進行 wxss 的格式化和壓縮，所以你也可以用它來個性化生成 「Ripples.min.wxss」 后引入，以避免代碼冗余。

　　如下：

　　你需要安裝 「gulp」 和其他依賴。

　　$ cd path/to/Ripples.wxss/

　　$ sudo npm install

　　你可以執(zhí)行 「gulp」 命令，來生成 「ripples.wxss」和 「ripples.min.wxss」 文件，具體包含哪些請參見并修改根目錄下的 「ripples-config.json」 文件。

　　"bouncing_entrances": [

　　"bounceIn",

　　"bounceInDown",

　　"bounceInLeft",

　　"bounceInRight",

　　"bounceInUp"

　　]