前言

在做小程序列表展示的時(shí)候，接到了一個(gè)需求。需要在列表展示的時(shí)候加上動(dòng)畫(huà)效果。設(shè)計(jì)視頻效果如下圖：

需要在進(jìn)入列表頁(yè)的時(shí)候，依次展示每一條卡片，在展示完成后需要隱藏掉當(dāng)天之前的卡片。

實(shí)現(xiàn)思路

實(shí)現(xiàn)該動(dòng)畫(huà)效果，首先需要給每個(gè)卡片添加一個(gè)css動(dòng)畫(huà)。因?yàn)槊總€(gè)卡片的顯示是有時(shí)間間隔的，以及考慮到展示完成后的隱藏效果，所以動(dòng)畫(huà)效果需要用js動(dòng)態(tài)去添加。在看了微信開(kāi)發(fā)文檔后，發(fā)現(xiàn)微信小程序提供了Animation的一個(gè)動(dòng)畫(huà)對(duì)象，具體看了里面的參數(shù)后發(fā)現(xiàn)，是可以實(shí)現(xiàn)需求上的效果的。具體使用如下api:

wx.createAnimation(Object object) 創(chuàng)建一個(gè)animation對(duì)象。最后通過(guò)動(dòng)畫(huà)實(shí)例的export方法導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)傳遞給組件的 animation 屬性。里面有如下參數(shù)：duration（動(dòng)畫(huà)持續(xù)時(shí)間，單位 ms）,timingFunction（動(dòng)畫(huà)的國(guó)度效果）,delay（動(dòng)畫(huà)延遲）

創(chuàng)建的animation對(duì)象，本次實(shí)現(xiàn)過(guò)程中需要用到如下屬性：

Animation.export() 可以導(dǎo)出動(dòng)畫(huà)隊(duì)列，export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫(huà)操作。
Animation.step(Object object) 表示一組動(dòng)畫(huà)完成。可以在一組動(dòng)畫(huà)中調(diào)用任意多個(gè)動(dòng)畫(huà)方法，一組動(dòng)畫(huà)中的所有動(dòng)畫(huà)會(huì)同時(shí)開(kāi)始，一組動(dòng)畫(huà)完成后才會(huì)進(jìn)行下一組動(dòng)畫(huà)。比如一組動(dòng)畫(huà)結(jié)束了，就以step()結(jié)尾
Animation.translateY(number translation) 在 Y 軸平移的距離，單位為 px
Animation.opacity(number value) 透明度 0-1的取值范圍

看到上面這些屬性，合理使用的話，那么實(shí)現(xiàn)需求提到動(dòng)畫(huà)效果那是穩(wěn)穩(wěn)的。

實(shí)現(xiàn)步驟

封裝一個(gè)方法，用來(lái)創(chuàng)建動(dòng)畫(huà)，并方便調(diào)用

 /**
 * 動(dòng)畫(huà)實(shí)現(xiàn)
 * @method animationShow
 * @param {that} 當(dāng)前卡片
 * @param {opacity} 透明度
 * @param {delay} 延遲
 * @param {isUp} 移動(dòng)方向
 */
 animationShow: function (that,opacity, delay, isUp) {
 let animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease',
  delay: delay
 });
 <!--考慮到還需要隱藏掉當(dāng)天之前的卡片，做如下判斷來(lái)賦予不同的動(dòng)畫(huà)效果-->
 if (isUp == 'down') {
  animation.translateY(0).opacity(opacity).step().translateY(-80).step();
 } else if (isUp == 'up') {
  animation.translateY(0).opacity(opacity).step().translateY(-140).opacity(0).step()
 } else {
  animation.translateY(0).opacity(opacity).step()
 }
 let params = ''
 params = animation.export()
 return params
 }, 

初始化每個(gè)卡片的樣式

首先每個(gè)卡片的位置相對(duì)于自身往Y軸平移80像素，并且把透明度設(shè)置為0。這樣就可以進(jìn)入頁(yè)面的時(shí)候再往下平移并且讓卡片逐漸顯示。

.init{
 opacity: 0;
 transform: translateY(-80px)
}

處理數(shù)據(jù)

循環(huán)處理每一條數(shù)據(jù)，通過(guò)調(diào)用封裝的方法，來(lái)獲得該卡片應(yīng)該擁有的動(dòng)畫(huà)屬性

 for (let i = 0; i < transData.length; i++) {
 if (i == 0) {
  transData[i].animation = that.app.slideupshow(that, 1, 0, 'up')
 } else {
  transData[i].animation = that.app.slideupshow(that, 1, (i + 1) * 10, 'down')
 }
 }

給每個(gè)卡片附加animation屬性

<view class="init" animation="{{item.animation}}">

實(shí)現(xiàn)效果

跟設(shè)計(jì)視頻中的動(dòng)畫(huà)風(fēng)格基本保持一致，美滋滋。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論