開端

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

原創文章，允許轉載分享。但請轉載請一定標明出處，這是起碼的尊重
本文章閱讀前需要對微信小程序的動畫api有所了解

先看效果

可以看到，動畫效果十分流暢，高度復用，封裝好后只需要三行代碼實現動畫

解決

1.尋根問底，發現wx_mini_program(下面稱呼微信小程序為wxmp [差點叫成 (*´ﾉ皿`)mmp] )有一個全局的js邏輯文件，叫app.js，有意思，可以往里面塞自己寫的object(函數數據等等)，那就從那里入手吧
2.在app.js中定義全局的動畫函數

App({ //漸入，漸出實現  show : function(that,param,opacity){  var animation = wx.createAnimation({   //持續時間800ms   duration: 800,   timingFunction: 'ease',  });  //var animation = this.animation  animation.opacity(opacity).step()  //將param轉換為key  var json = '{"' + param + '":""}'  json = JSON.parse(json);  json[param] = animation.export()  //設置動畫  that.setData(json) }, //滑動漸入漸出 slideupshow:function(that,param,px,opacity){  var animation = wx.createAnimation({   duration: 800,   timingFunction: 'ease',  });  animation.translateY(px).opacity(opacity).step()  //將param轉換為key  var json = '{"' + param + '":""}'  json = JSON.parse(json);  json[param] = animation.export()  //設置動畫  that.setData(json) }, //向右滑動漸入漸出 sliderightshow: function (that, param, px, opacity) {  var animation = wx.createAnimation({   duration: 800,   timingFunction: 'ease',  });  animation.translateX(px).opacity(opacity).step()  //將param轉換為key  var json = '{"' + param + '":""}'  json = JSON.parse(json);  json[param] = animation.export()  //設置動畫  that.setData(json) }})

3.現在我們再看看調用這個函數的具體方法
在wxml中，只需要設置animation綁定即可，以首頁index為例

// 這里是pages/page/index.wxml//使用view包裹需要動畫的元素//class中定義動畫開始前的初始樣式，如透明度=0，向下偏移200px等，animtion屬性填入綁定值<view class="init" animation="{{slide_up1}}">

4.在該頁的js中

// 這里是pages/page/index.js//首先獲取小程序實例，訪問app.js中的函數this.app = getApp();//調用show函數，傳參//注意：查看上面show函數定義查看參數含義//第一個參數是當前的頁面對象，方便函數setData直接返回數據//第二個參數是綁定的數據名,傳參給setData，詳細見上面//第三個參數是上下滑動的px,因為class="init"定義初始該元素向下偏移了200px，所以這里使其上移200px//第四個參數是需要修改為的透明度，這里是1，表示從初始的class="init"中定義的透明度0修改到1this.app.slideupshow(this, 'slide_up1', -200, 1)