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

前言

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

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

實現思路

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

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

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

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

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

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

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

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

實現步驟

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

/**
 * 動畫實現
 * @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)
}
複製代碼

處理數據

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

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}}">

實現效果

跟設計視頻中的動畫風格基本保持一致,美滋滋。
相關文章
相關標籤/搜索