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

　　舉個(gè)簡(jiǎn)單的例子：我們?cè)谑褂?wx,showModal(obj) 、并且交互層級(jí)分明的情況下，可以給底層加一個(gè) 「高斯模糊」，例如：

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

　　有時(shí)候幾行簡(jiǎn)單的代碼就能給一款產(chǎn)品帶來(lái)高一個(gè)層次的體驗(yàn)。

　　下面說(shuō)我們今天的重頭戲，為微信小程序定制的 css3 動(dòng)效庫(kù) Ripples.wxss

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

　　聲明：其中大部分動(dòng)效來(lái)自 Animate.css

　　安裝

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

　　npm install ripples.wxss --save

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

　　使用

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

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

　　element

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

　　使用實(shí)例

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

　　(此圖片來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(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

　　不同場(chǎng)景下的使用邏輯還請(qǐng)自行斟酌

　　個(gè)性化引入

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

　　如下：

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

　　$ cd path/to/Ripples.wxss/

　　$ sudo npm install

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

　　"bouncing_entrances": [

　　"bounceIn",

　　"bounceInDown",

　　"bounceInLeft",

　　"bounceInRight",

　　"bounceInUp"

　　]