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

先看下效果图. 

代码: 

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. }