今天我們來說說小程序的 UX (或者說：微交互)。團隊的技術水平決定產品的下限，對微交互的極致追求決定了產品的上限。
舉個簡單的例子：我們在使用 wx,showModal(obj) 、并且交互層級分明的情況下，可以給底層加一個 「高斯模糊」，例如：
.blur {filter: blur(6rpx);}
有時候幾行簡單的代碼就能給一款產品帶來高一個層次的體驗。
下面說我們今天的重頭戲，為微信小程序定制的 css3 動效庫 Ripples.wxss
希望大家不要吝惜自己的 star~ 。
聲明：其中大部分動效來自 Animate.css
安裝
如果你的微信小程序項目基于 nodejs 開發，你可以使用 npm 安裝，并拷貝到相關目錄后 @import "path/ripples.min.wxss"
npm install ripples.wxss --save
或直接 clone \ download 倉庫https://github.com/jeasonstudio/Ripples.wxss.git，拷貝 ripples.wxss 或 ripples.min.wxss到相關目錄后 @import "path/ripples.min.wxss"。
使用
首先在你想引入 「Ripples.wxss」 動效的 「element」 上加 「ripple」 class。
如果你想讓他循環不斷播放，請添加 「infinite」 class。
element
接下來你需要再添加如下你需要的 class (例如上面例子中的 「bounce」)、相應 class 列表可參考 這里，或者 Animate.css
使用實例
你可以查看根目錄下的 DEMO 項目，為所有 Ripples.wxss 的綜合展示，如圖：
(此圖片來源于網絡，如有侵權，請聯系刪除! )
也可以參考如下的例子：
//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
你可以執行 「gulp」 命令，來生成 「ripples.wxss」和 「ripples.min.wxss」 文件，具體包含哪些請參見并修改根目錄下的 「ripples-config.json」 文件。
"bouncing_entrances": [
"bounceIn",
"bounceInDown",
"bounceInLeft",
"bounceInRight",
"bounceInUp"
]