微信小程序开发之弹出菜单

周五.玩具一枚. 
gif: 

代码: 
1.index.js

//index.js//获取应用实例var app = getApp()Page({  data: {    isPopping: false,//是否已经弹出    animationPlus: {},//旋转动画    animationcollect: {},//item位移,透明度    animationTranspond: {},//item位移,透明度    animationInput: {},//item位移,透明度    //我的博客:http://blog.csdn.net/qq_31383345    //CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html  },  onLoad: function () {  },  //点击弹出  plus: function () {    if (this.data.isPopping) {      //缩回动画      popp.call(this);      this.setData({        isPopping: false      })    } else {      //弹出动画      takeback.call(this);      this.setData({        isPopping: true      })    }  },  input: function () {    console.log("input")  },  transpond: function () {    console.log("transpond")  },  collect: function () {    console.log("collect")  }})//弹出动画function popp() {  //plus顺时针旋转  var animationPlus = wx.createAnimation({    duration: 500,    timingFunction: 'ease-out'  })  var animationcollect = wx.createAnimation({    duration: 500,    timingFunction: 'ease-out'  })  var animationTranspond = wx.createAnimation({    duration: 500,    timingFunction: 'ease-out'  })  var animationInput = wx.createAnimation({    duration: 500,    timingFunction: 'ease-out'  })  animationPlus.rotateZ(180).step();  animationcollect.translate(-100, -100).rotateZ(180).opacity(1).step();  animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step();  animationInput.translate(-100, 100).rotateZ(180).opacity(1).step();  this.setData({    animationPlus: animationPlus.export(),    animationcollect: animationcollect.export(),    animationTranspond: animationTranspond.export(),    animationInput: animationInput.export(),  })}//收回动画function takeback() {  //plus逆时针旋转  var animationPlus = wx.createAnimation({    duration: 500,    timingFunction: 'ease-out'  })  var animationcollect = wx.createAnimation({    duration: 500,    timingFunction: 'ease-out'  })  var animationTranspond = wx.createAnimation({    duration: 500,    timingFunction: 'ease-out'  })  var animationInput = wx.createAnimation({    duration: 500,    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();  this.setData({    animationPlus: animationPlus.export(),    animationcollect: animationcollect.export(),    animationTranspond: animationTranspond.export(),    animationInput: animationInput.export(),  })}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

2.index.wxml

<!--index.wxml--><image src="../../images/collect.png" animation="{{animationcollect}}" class="image-style" bindtap="collect"></image><image src="../../images/transpond.png" animation="{{animationTranspond}}" class="image-style" bindtap="transpond"></image><image src="../../images/input.png" animation="{{animationInput}}" class="image-style" bindtap="input"></image><image src="../../images/plus.png" animation="{{animationPlus}}" class="image-plus-style" bindtap="plus"></image>
1
2
3
4
5
1
2
3
4
5

3.index.wxss

/**index.wxss**/.image-style {  height: 150rpx;  width: 150rpx;  position: absolute;  bottom: 250rpx;  right: 100rpx;  opacity: 0;}.image-plus-style {  height: 150rpx;  width: 150rpx;  position: absolute;  bottom: 250rpx;  right: 100rpx;  z-index: 100;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

demo代码下载 
我的博客,欢迎交流批评! 
CSDN微信小程序开发专栏