微信小程序-漸入漸出動畫效果實現

前言

在作小程序列表展現的時候，接到了一個需求。須要在列表展現的時候加上動畫效果。設計視頻效果以下圖：

須要在進入列表頁的時候，依次展現每一條卡片，在展現完成後須要隱藏掉當天以前的卡片。

實現思路

實現該動畫效果，首先須要給每一個卡片添加一個css動畫。由於每一個卡片的顯示是有時間間隔的，以及考慮到展現完成後的隱藏效果，因此動畫效果須要用js動態去添加。在看了微信開發文檔後，發現微信小程序提供了Animation的一個動畫對象，具體看了裏面的參數後發現，是能夠實現需求上的效果的。具體使用以下api:

wx.createAnimation(Object object) 建立一個animation對象。最後經過動畫實例的export方法導出動畫數據傳遞給組件的 animation 屬性。裏面有以下參數：duration（動畫持續時間，單位 ms）,timingFunction（動畫的國度效果）,delay（動畫延遲）

建立的animation對象，本次實現過程當中須要用到以下屬性：

Animation.export() 能夠導出動畫隊列，export 方法每次調用後會清掉以前的動畫操做。

Animation.step(Object object) 表示一組動畫完成。能夠在一組動畫中調用任意多個動畫方法，一組動畫中的全部動畫會同時開始，一組動畫完成後纔會進行下一組動畫。好比一組動畫結束了，就以step()結尾

Animation.translateY(number translation) 在 Y 軸平移的距離，單位爲 px

Animation.opacity(number value) 透明度 0-1的取值範圍

看到上面這些屬性，合理使用的話，那麼實現需求提到動畫效果那是穩穩的。

實現步驟

封裝一個方法，用來建立動畫，並方便調用

/**
 * 動畫實現
 * @method animationShow
 * @param {that} 當前卡片
 * @param {opacity} 透明度
 * @param {delay} 延遲
 * @param {isUp} 移動方向
 */
  animationShow: function (that,opacity, delay, isUp) {
    let animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: delay
    });
    <!--考慮到還須要隱藏掉當天以前的卡片，作以下判斷來賦予不一樣的動畫效果-->
    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
  }, 
複製代碼

初始化每一個卡片的樣式

首先每一個卡片的位置相對於自身往Y軸平移80像素，而且把透明度設置爲0。這樣就能夠進入頁面的時候再往下平移而且讓卡片逐漸顯示。
.init{
  opacity: 0;
  transform: translateY(-80px)
}
複製代碼

處理數據

循環處理每一條數據，經過調用封裝的方法，來得到該卡片應該擁有的動畫屬性

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')
    }
  }
複製代碼

給每一個卡片附加animation屬性

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

實現效果

跟設計視頻中的動畫風格基本保持一致，美滋滋。