微信小程序如何制作长尾词式的炫酷弹出菜单动画效果？

本文共计960个文字，预计阅读时间需要4分钟。

今天为大家带来一个微信小程序的弹窗效果，展示是菜单一键生成效果，老规矩先上图效：

（录制gif动图有点卡，实际在真机或模拟器上很流畅）+ 先简单说下思路：

1、首先在屏幕的某个位置放置几个悬浮元素；

2、点击悬浮元素后触发弹窗效果；

3、弹窗内容为菜单列表，点击菜单项进行相应的操作。

今天给大家带来一个微信小程序的弹出是菜单效果，老规矩先上效果图。(录制的gif动画有点卡，实际真机或是模拟器上很顺畅)

先简单说下思路：

1、首先在屏幕的某个位置放几个悬浮按钮，放几个看你需要的功能

2、点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩，这个遮罩在我前面自定义modal弹框时有用到

3、分别对按钮做旋转和移动动画和透明度，造成动画差异就是位移的动画距离不同

4、收起的时候回到原来位置并且让透明度变成0就ok了

思路说完了，下面开始上实现代码，这里同样也是封装成了组件，方便调用。