微信小程序?qū)崿F(xiàn)元素漸入漸出動(dòng)畫效果封裝方法

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

// 這里是pages/page/index.wxml
//使用view包裹需要?jiǎng)赢嫷脑?//class中定義動(dòng)畫開(kāi)始前的初始樣式，如透明度=0，向下偏移200px等，animtion屬性填入綁定值
<view class="init" animation="{{slide_up1}}">

// 這里是pages/page/index.js
//首先獲取小程序?qū)嵗L問(wèn)app.js中的函數(shù)
this.app = getApp();
//調(diào)用show函數(shù)，傳參
//注意：查看上面show函數(shù)定義查看參數(shù)含義
//第一個(gè)參數(shù)是當(dāng)前的頁(yè)面對(duì)象，方便函數(shù)setData直接返回?cái)?shù)據(jù)
//第二個(gè)參數(shù)是綁定的數(shù)據(jù)名,傳參給setData，詳細(xì)見(jiàn)上面
//第三個(gè)參數(shù)是上下滑動(dòng)的px,因?yàn)閏lass="init"定義初始該元素向下偏移了200px，所以這里使其上移200px
//第四個(gè)參數(shù)是需要修改為的透明度，這里是1，表示從初始的class="init"中定義的透明度0修改到1
this.app.slideupshow(this, 'slide_up1', -200, 1)

<view class="init" animation="{{slide_up1}}">
  <card>...</card>
</view>
<view class="init" animation="{{slide_up2}}">
  <card>...</card>
</view>

//onload時(shí)獲取小程序?qū)嵗?onLoad: function (options) {
  this.app = getApp()
 },
//頁(yè)面展示時(shí)，觸發(fā)動(dòng)畫
 onShow: function () {
  this.app.slideupshow(this, 'slide_up1', -200, 1)

  setTimeout(function () {
   this.app.slideupshow(this, 'slide_up2', -200, 1)
  }.bind(this), 200);
 },
//頁(yè)面隱藏時(shí)，觸發(fā)漸出動(dòng)畫
 onHide: function () {
   //你可以看到，動(dòng)畫參數(shù)的200,0與漸入時(shí)的-200,1剛好是相反的，其實(shí)也就做到了頁(yè)面還原的作用，使頁(yè)面重新打開(kāi)時(shí)重新展示動(dòng)畫
  this.app.slideupshow(this, 'slide_up1', 200, 0)
  //延時(shí)展現(xiàn)容器2，做到瀑布流的效果，見(jiàn)上面預(yù)覽圖
  setTimeout(function () {
   this.app.slideupshow(this, 'slide_up2', 200, 0)
  }.bind(this), 200);
 }