在作小程序列表展現的時候,接到了一個需求。須要在列表展現的時候加上動畫效果。設計視頻效果以下圖: 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 軸平移的距離,單位爲 px
markdown
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') } } 複製代碼
<view class="init" animation="{{item.animation}}">