今天我們來(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"
]
