開端

創(chuàng)新互聯(lián)是一家專注于做網(wǎng)站、成都做網(wǎng)站與策劃設(shè)計(jì),那曲網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:那曲等地區(qū)。那曲做網(wǎng)站價(jià)格咨詢:18980820575

之前一直使用堪稱“萬能”的jQuery處理用戶交互的動(dòng)畫，近日開發(fā)微信小程序，微信小程序高度限制的語法和功能使開源函數(shù)可謂對(duì)其“無能為力”。
那沒辦法，只好自己寫一個(gè)可以讓元素漸入漸出的，可復(fù)用的函數(shù)了。做到類似jQuery show()的效果

原創(chuàng)文章，允許轉(zhuǎn)載分享。但請(qǐng)轉(zhuǎn)載請(qǐng)一定標(biāo)明出處，這是起碼的尊重
本文章閱讀前需要對(duì)微信小程序的動(dòng)畫api有所了解

先看效果

可以看到，動(dòng)畫效果十分流暢，高度復(fù)用，封裝好后只需要三行代碼實(shí)現(xiàn)動(dòng)畫

解決

1.尋根問底，發(fā)現(xiàn)wx_mini_program(下面稱呼微信小程序?yàn)閣xmp [差點(diǎn)叫成 (*´ﾉ皿`)mmp] )有一個(gè)全局的js邏輯文件，叫app.js，有意思，可以往里面塞自己寫的object(函數(shù)數(shù)據(jù)等等)，那就從那里入手吧
2.在app.js中定義全局的動(dòng)畫函數(shù)

App({
 //漸入，漸出實(shí)現(xiàn) 
 show : function(that,param,opacity){
  var animation = wx.createAnimation({
   //持續(xù)時(shí)間800ms
   duration: 800,
   timingFunction: 'ease',
  });
  //var animation = this.animation
  animation.opacity(opacity).step()
  //將param轉(zhuǎn)換為key
  var json = '{"' + param + '":""}'
  json = JSON.parse(json);
  json[param] = animation.export()
  //設(shè)置動(dòng)畫
  that.setData(json)
 },

 //滑動(dòng)漸入漸出
 slideupshow:function(that,param,px,opacity){
  var animation = wx.createAnimation({
   duration: 800,
   timingFunction: 'ease',
  });
  animation.translateY(px).opacity(opacity).step()
  //將param轉(zhuǎn)換為key
  var json = '{"' + param + '":""}'
  json = JSON.parse(json);
  json[param] = animation.export()
  //設(shè)置動(dòng)畫
  that.setData(json)
 },

 //向右滑動(dòng)漸入漸出
 sliderightshow: function (that, param, px, opacity) {
  var animation = wx.createAnimation({
   duration: 800,
   timingFunction: 'ease',
  });
  animation.translateX(px).opacity(opacity).step()
  //將param轉(zhuǎn)換為key
  var json = '{"' + param + '":""}'
  json = JSON.parse(json);
  json[param] = animation.export()
  //設(shè)置動(dòng)畫
  that.setData(json)
 }
})

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前名稱：微信小程序?qū)崿F(xiàn)元素漸入漸出動(dòng)畫效果封裝方法-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://weahome.cn/article/jpjoc.html