微信小程序开发之『弹出菜单』特效

 http://blog.csdn.net/qq_26420489/article/details/62044014

先看下效果图. 

代码: 

1.popMenu.js

[html] view plain copy
 
  1. Page({  
  2.     data: {  
  3.         isPopping: false,//是否已经弹出  
  4.         animPlus: {},//旋转动画  
  5.         animCollect: {},//item位移,透明度  
  6.         animTranspond: {},//item位移,透明度  
  7.         animInput: {},//item位移,透明度  
  8.     },  
  9.     //点击弹出  
  10.     plus: function () {  
  11.         if (this.data.isPopping) {  
  12.             //缩回动画  
  13.             this.popp();  
  14.             this.setData({  
  15.                 isPopping: false  
  16.             })  
  17.         } else if (!this.data.isPopping) {  
  18.             //弹出动画  
  19.             this.takeback();  
  20.             this.setData({  
  21.                 isPopping: true  
  22.             })  
  23.         }  
  24.     },  
  25.     input: function () {  
  26.         console.log("input")  
  27.     },  
  28.     transpond: function () {  
  29.         console.log("transpond")  
  30.     },  
  31.     collect: function () {  
  32.         console.log("collect")  
  33.     },  
  34.   
  35.     //弹出动画  
  36.     popp: function () {  
  37.         //plus顺时针旋转  
  38.         var animationPlus = wx.createAnimation({  
  39.             duration: 500,  
  40.             timingFunction: 'ease-out'  
  41.         })  
  42.         var animationcollect = wx.createAnimation({  
  43.             duration: 500,  
  44.             timingFunction: 'ease-out'  
  45.         })  
  46.         var animationTranspond = wx.createAnimation({  
  47.             duration: 500,  
  48.             timingFunction: 'ease-out'  
  49.         })  
  50.         var animationInput = wx.createAnimation({  
  51.             duration: 500,  
  52.             timingFunction: 'ease-out'  
  53.         })  
  54.         animationPlus.rotateZ(180).step();  
  55.         animationcollect.translate(-100, -100).rotateZ(180).opacity(1).step();  
  56.         animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step();  
  57.         animationInput.translate(-100, 100).rotateZ(180).opacity(1).step();  
  58.         this.setData({  
  59.             animPlus: animationPlus.export(),  
  60.             animCollect: animationcollect.export(),  
  61.             animTranspond: animationTranspond.export(),  
  62.             animInput: animationInput.export(),  
  63.         })  
  64.     },  
  65.     //收回动画  
  66.     takeback: function () {  
  67.         //plus逆时针旋转  
  68.         var animationPlus = wx.createAnimation({  
  69.             duration: 500,  
  70.             timingFunction: 'ease-out'  
  71.         })  
  72.         var animationcollect = wx.createAnimation({  
  73.             duration: 500,  
  74.             timingFunction: 'ease-out'  
  75.         })  
  76.         var animationTranspond = wx.createAnimation({  
  77.             duration: 500,  
  78.             timingFunction: 'ease-out'  
  79.         })  
  80.         var animationInput = wx.createAnimation({  
  81.             duration: 500,  
  82.             timingFunction: 'ease-out'  
  83.         })  
  84.         animationPlus.rotateZ(0).step();  
  85.         animationcollect.translate(0, 0).rotateZ(0).opacity(0).step();  
  86.         animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step();  
  87.         animationInput.translate(0, 0).rotateZ(0).opacity(0).step();  
  88.         this.setData({  
  89.             animPlus: animationPlus.export(),  
  90.             animCollect: animationcollect.export(),  
  91.             animTranspond: animationTranspond.export(),  
  92.             animInput: animationInput.export(),  
  93.         })  
  94.     },  
  95.   
  96.   
  97.     onLoad: function (options) {  
  98.         // 生命周期函数--监听页面加载  
  99.     },  
  100.     onReady: function () {  
  101.         // 生命周期函数--监听页面初次渲染完成  
  102.     },  
  103.     onShow: function () {  
  104.         // 生命周期函数--监听页面显示  
  105.     },  
  106.     onHide: function () {  
  107.         // 生命周期函数--监听页面隐藏  
  108.     },  
  109.     onUnload: function () {  
  110.         // 生命周期函数--监听页面卸载  
  111.     },  
  112.     onPullDownRefresh: function () {  
  113.         // 页面相关事件处理函数--监听用户下拉动作  
  114.     },  
  115.     onReachBottom: function () {  
  116.         // 页面上拉触底事件的处理函数  
  117.     },  
  118.     onShareAppMessage: function () {  
  119.         // 用户点击右上角分享  
  120.         return {  
  121.             title: 'title', // 分享标题  
  122.             desc: 'desc', // 分享描述  
  123.             path: 'path' // 分享路径  
  124.         }  
  125.     }  
  126. })  

2.popMenu.wxml

[html] view plain copy
 
  1. <view>  
  2.   <image src="/pages/images/collect.png" class="img-style" animation="{{animCollect}}" bindtap="collect"></image>  
  3.   <image src="/pages/images/transpond.png" class="img-style" animation="{{animTranspond}}" bindtap="transpond"></image>  
  4.   <image src="/pages/images/input.png" class="img-style" animation="{{animInput}}" bindtap="input"></image>  
  5.   <image src="/pages/images/plus.png" class="img-plus-style" animation="{{animPlus}}" bindtap="plus"></image>  
  6. </view>  

3.popMenu.wxss

[html] view plain copy
 
    1. .img-plus-style {  
    2.   height: 150rpx;  
    3.    150rpx;  
    4.   position: absolute;  
    5.   bottom: 250rpx;  
    6.   right: 100rpx;  
    7.   z-index: 100;  
    8. }  
    9.   
    10. .img-style {  
    11.   height: 150rpx;  
    12.    150rpx;  
    13.   position: absolute;  
    14.   bottom: 250rpx;  
    15.   right: 100rpx;  
    16.   opacity: 0;  
    17. }  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiaobai-y/p/7490563.html