微信小程序動畫之彈出菜單，供大家參考，具體內(nèi)容如下

“真誠服務(wù)，讓網(wǎng)絡(luò)創(chuàng)造價值”是我們的服務(wù)理念，成都創(chuàng)新互聯(lián)團隊十多年如一日始終堅持在網(wǎng)站建設(shè)領(lǐng)域,為客戶提供優(yōu)質(zhì)服。不管你處于什么行業(yè)，助你輕松跨入“互聯(lián)網(wǎng)+”時代，PC網(wǎng)站+手機網(wǎng)站+公眾號+小程序定制開發(fā)。

效果圖

js：

Page({
 data: {
  isPopping: false,
  animPlus: {},
  animCollect: {},
  animTranspond: {},
  animInput: {},
  animCloud:{},
  aninWrite:{},
 },
 //點擊彈出
 plus: function () {
  if (this.data.isPopping) {
   //縮回動畫
   this.popp();
   this.setData({
    isPopping: false
   })
  } else if (!this.data.isPopping) {
   //彈出動畫
   this.takeback();
   this.setData({
    isPopping: true
   })
  }
 },
 input: function () {
  console.log("input")
 },
 transpond: function () {
  console.log("transpond")
 },
 collect: function () {
  console.log("collect")
 },
 cloud:function(){
  console.log("cloud")
 },
 write: function () {
  console.log("cloud")
 },


 //彈出動畫
 popp: function () {
  //plus順時針旋轉(zhuǎn)
  var animationPlus = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationcollect = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationTranspond = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationInput = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationCloud = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationWrite = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  animationPlus.rotateZ(180).step();
  animationcollect.translate(-90, -100).rotateZ(180).opacity(1).step();
  animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step();
  animationInput.translate(-90, 100).rotateZ(180).opacity(1).step();
  animationCloud.translate(0, 135).rotateZ(180).opacity(1).step();
  animationWrite.translate(0, -135).rotateZ(180).opacity(1).step();
  this.setData({
   animPlus: animationPlus.export(),
   animCollect: animationcollect.export(),
   animTranspond: animationTranspond.export(),
   animInput: animationInput.export(),
   animCloud: animationCloud.export(),
   animWrite: animationWrite.export(),
  })
 },
 //收回動畫
 takeback: function () {
  //plus逆時針旋轉(zhuǎn)
  var animationPlus = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationcollect = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationTranspond = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationInput = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationCloud = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  var animationWrite = wx.createAnimation({
   duration: 400,
   timingFunction: 'ease-out'
  })
  animationPlus.rotateZ(0).step();
  animationcollect.translate(0, 0).rotateZ(0).opacity(0).step();
  animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step();
  animationInput.translate(0, 0).rotateZ(0).opacity(0).step();
  animationCloud.translate(0, 0).rotateZ(0).opacity(0).step();
  animationWrite.translate(0, 0).rotateZ(0).opacity(0).step();
  this.setData({
   animPlus: animationPlus.export(),
   animCollect: animationcollect.export(),
   animTranspond: animationTranspond.export(),
   animInput: animationInput.export(),
   animCloud: animationCloud.export(),
   animWrite: animationWrite.export(),
  })
 },


 onLoad: function (options) {
  // 生命周期函數(shù)--監(jiān)聽頁面加載
 },
 onReady: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 },
 onShow: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面顯示
 },
 onHide: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面隱藏
 },
 onUnload: function () {
  // 生命周期函數(shù)--監(jiān)聽頁面卸載
 },
 onPullDownRefresh: function () {
  // 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
 },
 onReachBottom: function () {
  // 頁面上拉觸底事件的處理函數(shù)
 },
 onShareAppMessage: function () {
  // 用戶點擊右上角分享
  return {
   title: 'title', // 分享標(biāo)題
   desc: 'desc', // 分享描述
   path: 'path' // 分享路徑
  }
 }
})

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

文章題目：微信小程序?qū)崿F(xiàn)彈出菜單動畫-創(chuàng)新互聯(lián)
分享URL：http://chinadenli.net/article22/epjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站排名、面包屑導(dǎo)航、用戶體驗、品牌網(wǎng)站設(shè)計、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)