频道栏目
首页 > 微信学院 > 微信小程序 > 正文

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

2018-04-28 04:17:30      个评论      
收藏   我要投稿

先看下效果图.

代码:
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
上一篇:iOS开发者的微信小程序初体验分享
下一篇:微信小程序几个入门基础知识点介绍
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站