小編給大家分享一下微信小程序如何實現(xiàn)漸入漸出動畫效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)專注于德令哈網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供德令哈營銷型網(wǎng)站建設，德令哈網(wǎng)站制作、德令哈網(wǎng)頁設計、德令哈網(wǎng)站官網(wǎng)定制、成都微信小程序服務，打造德令哈網(wǎng)絡公司原創(chuàng)品牌,更為您提供德令哈網(wǎng)站排名全網(wǎng)營銷落地服務。

前言

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

需要在進入列表頁的時候，依次展示每一條卡片，在展示完成后需要隱藏掉當天之前的卡片。

實現(xiàn)思路

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

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

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

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

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

實現(xiàn)步驟

封裝一個方法，用來創(chuàng)建動畫，并方便調(diào)用

 /**
 * 動畫實現(xiàn)
 * @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)
}

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

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

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

實現(xiàn)效果

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

看完了這篇文章，相信你對“微信小程序如何實現(xiàn)漸入漸出動畫效果”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前名稱：微信小程序如何實現(xiàn)漸入漸出動畫效果
文章路徑：http://jinyejixie.com/article45/pphohi.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、軟件開發(fā)、網(wǎng)站導航、網(wǎng)站策劃、響應式網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)