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

更新時間：2019年05月18日 11:00:25 作者：LYJSpeedX

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)元素漸入漸出動畫效果封裝方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

開端

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

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

先看效果

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

解決

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

App({
 //漸入，漸出實現(xiàn) 
 show : function(that,param,opacity){
  var animation = wx.createAnimation({
   //持續(xù)時間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è)置動畫
  that.setData(json)
 },

 //滑動漸入漸出
 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è)置動畫
  that.setData(json)
 },

 //向右滑動漸入漸出
 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è)置動畫
  that.setData(json)
 }
})

3.現(xiàn)在我們再看看調(diào)用這個函數(shù)的具體方法
在wxml中，只需要設(shè)置animation綁定即可，以首頁index為例

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

4.在該頁的js中

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

5.讓我們完善流程，達到預覽圖首頁的效果(有延時的邊上升邊出現(xiàn)效果)
wxml就是將各個容器分別綁定不同的變量,一個view容器就是一個動畫單位(可以這樣理解)，如

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

頁面的js

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

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

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)元素漸入漸出動畫效果封裝方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: