您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序如何實(shí)現(xiàn)漸入漸出動畫效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
前言
在做小程序列表展示的時(shí)候,接到了一個(gè)需求。需要在列表展示的時(shí)候加上動畫效果。設(shè)計(jì)視頻效果如下圖:
需要在進(jìn)入列表頁的時(shí)候,依次展示每一條卡片,在展示完成后需要隱藏掉當(dāng)天之前的卡片。
實(shí)現(xiàn)思路
實(shí)現(xiàn)該動畫效果,首先需要給每個(gè)卡片添加一個(gè)css動畫。因?yàn)槊總€(gè)卡片的顯示是有時(shí)間間隔的,以及考慮到展示完成后的隱藏效果,所以動畫效果需要用js動態(tài)去添加。在看了微信開發(fā)文檔后,發(fā)現(xiàn)微信小程序提供了Animation的一個(gè)動畫對象,具體看了里面的參數(shù)后發(fā)現(xiàn),是可以實(shí)現(xiàn)需求上的效果的。具體使用如下api:
wx.createAnimation(Object object) 創(chuàng)建一個(gè)animation對象。最后通過動畫實(shí)例的export方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的 animation 屬性。里面有如下參數(shù):duration(動畫持續(xù)時(shí)間,單位 ms),timingFunction(動畫的國度效果),delay(動畫延遲)
創(chuàng)建的animation對象,本次實(shí)現(xiàn)過程中需要用到如下屬性:
Animation.export() 可以導(dǎo)出動畫隊(duì)列,export 方法每次調(diào)用后會清掉之前的動畫操作。
Animation.step(Object object) 表示一組動畫完成??梢栽谝唤M動畫中調(diào)用任意多個(gè)動畫方法,一組動畫中的所有動畫會同時(shí)開始,一組動畫完成后才會進(jìn)行下一組動畫。比如一組動畫結(jié)束了,就以step()結(jié)尾
Animation.translateY(number translation) 在 Y 軸平移的距離,單位為 px
Animation.opacity(number value) 透明度 0-1的取值范圍
看到上面這些屬性,合理使用的話,那么實(shí)現(xiàn)需求提到動畫效果那是穩(wěn)穩(wěn)的。
實(shí)現(xiàn)步驟
封裝一個(gè)方法,用來創(chuàng)建動畫,并方便調(diào)用
/** * 動畫實(shí)現(xiàn) * @method animationShow * @param {that} 當(dāng)前卡片 * @param {opacity} 透明度 * @param {delay} 延遲 * @param {isUp} 移動方向 */ animationShow: function (that,opacity, delay, isUp) { let animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease', delay: delay }); <!--考慮到還需要隱藏掉當(dāng)天之前的卡片,做如下判斷來賦予不同的動畫效果--> 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è)卡片的位置相對于自身往Y軸平移80像素,并且把透明度設(shè)置為0。這樣就可以進(jìn)入頁面的時(shí)候再往下平移并且讓卡片逐漸顯示。
.init{ opacity: 0; transform: translateY(-80px) }
處理數(shù)據(jù)
循環(huán)處理每一條數(shù)據(jù),通過調(diào)用封裝的方法,來獲得該卡片應(yīng)該擁有的動畫屬性
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ì)視頻中的動畫風(fēng)格基本保持一致,美滋滋。
看完了這篇文章,相信你對“微信小程序如何實(shí)現(xiàn)漸入漸出動畫效果”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。