用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:37

作者:ruicoding,来自原文地址 先看下效果图. 代码: 1.popMenu.jsPage({ data: { isPopping: false,//是否已经弹出 animPlus: {},//旋转动画 animCollect: {},//item位移,透明度 ...

作者:ruicoding,来自

原文地址


先看下效果图.

代码:
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. popp: function () {
  36. //plus顺时针旋转
  37. var animationPlus = wx.createAnimation({
  38. duration: 500,
  39. timingFunction: 'ease-out'
  40. })
  41. var animationcollect = wx.createAnimation({
  42. duration: 500,
  43. timingFunction: 'ease-out'
  44. })
  45. var animationTranspond = wx.createAnimation({
  46. duration: 500,
  47. timingFunction: 'ease-out'
  48. })
  49. var

    邀请

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏