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

先看下效果图. 

代码: 
1.popMenu.js

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

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

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