先给大家展示下效果图，具体效果图如下所示：

具体代码如下所示:

1.index.js

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
 isPopping: false,//是否已经弹出
 animationPlus: {},//旋转动画
 animationcollect: {},//item位移,透明度
 animationTranspond: {},//item位移,透明度
 animationInput: {},//item位移,透明度
 //我的博客:http://blog.csdn.net/qq_31383345
 //CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html
 },
 onLoad: function () {
 },
 //点击弹出
 plus: function () {
 if (this.data.isPopping) {
 //缩回动画
 popp.call(this);
 this.setData({
 isPopping: false
 })
 } else {
 //弹出动画
 takeback.call(this);
 this.setData({
 isPopping: true
 })
 }
 },
 input: function () {
 console.log("input")
 },
 transpond: function () {
 console.log("transpond")
 },
 collect: function () {
 console.log("collect")
 }
})
//弹出动画
function popp() {
 //plus顺时针旋转
 var animationPlus = wx.createAnimation({
 duration: 500,
 timingFunction: 'ease-out'
 })
 var animationcollect = wx.createAnimation({
 duration: 500,
 timingFunction: 'ease-out'
 })
 var animationTranspond = wx.createAnimation({
 duration: 500,
 timingFunction: 'ease-out'
 })
 var animationInput = wx.createAnimation({
 duration: 500,
 timingFunction: 'ease-out'
 })
 animationPlus.rotateZ(180).step();
 animationcollect.translate(-100, -100).rotateZ(180).opacity(1).step();
 animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step();
 animationInput.translate(-100, 100).rotateZ(180).opacity(1).step();
 this.setData({
 animationPlus: animationPlus.export(),
 animationcollect: animationcollect.export(),
 animationTranspond: animationTranspond.export(),
 animationInput: animationInput.export(),
 })
}
//收回动画
function takeback() {
 //plus逆时针旋转
 var animationPlus = wx.createAnimation({
 duration: 500,
 timingFunction: 'ease-out'
 })
 var animationcollect = wx.createAnimation({
 duration: 500,
 timingFunction: 'ease-out'
 })
 var animationTranspond = wx.createAnimation({
 duration: 500,
 timingFunction: 'ease-out'
 })
 var animationInput = wx.createAnimation({
 duration: 500,
 timingFunction: 'ease-out'
 })
 animationPlus.rotateZ(0).step();
 animationcollect.translate(0, 0).rotateZ(0).opacity(0).step();
 animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step();
 animationInput.translate(0, 0).rotateZ(0).opacity(0).step();
 this.setData({
 animationPlus: animationPlus.export(),
 animationcollect: animationcollect.export(),
 animationTranspond: animationTranspond.export(),
 animationInput: animationInput.export(),
 })
}

2.index.wxml

<!--index.wxml-->
<image src="../../images/collect.png" animation="{{animationcollect}}" class="image-style" bindtap="collect"></image>
<image src="../../images/transpond.png" animation="{{animationTranspond}}" class="image-style" bindtap="transpond"></image>
<image src="../../images/input.png" animation="{{animationInput}}" class="image-style" bindtap="input"></image>
<image src="../../images/plus.png" animation="{{animationPlus}}" class="image-plus-style" bindtap="plus"></image>

3.index.wxss

/**index.wxss**/
.image-style {
 height: 150rpx;
 width: 150rpx;
 position: absolute;
 bottom: 250rpx;
 right: 100rpx;
 opacity: 0;
}
.image-plus-style {
 height: 150rpx;
 width: 150rpx;
 position: absolute;
 bottom: 250rpx;
 right: 100rpx;
 z-index: 100;
}

demo代码下载

以上所述是小编给大家介绍的Android中微信小程序开发之弹出菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# 微信小程序菜单  # Android分享微信小程序失败的一些事小结  # 微信小程序—微信跳一跳  # Android游戏助手(外挂)使用教程详解  # 微信小程序开发之IOS和Android兼容的问题  # 性能分析:指如何快速定位SQL问题  # Android开发微信小程序页面的图文教程  # 弹出  # 所示  # 小编  # 程序开发  # 在此  # 给大家  # 所述  # 给我留言  # 感谢大家  # 先给  # 我的博客  # 顺时针  # 应用实例  # 疑问请  # 有任何  # csdn  # net  # animationTranspond  # item  # animationInput 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  高端建站如何打造兼具美学与转化的品牌官网？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  Laravel如何处理和验证JSON类型的数据库字段  Laravel如何实现用户注册和登录？（Auth脚手架指南）  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  Python数据仓库与ETL构建实战_Airflow调度流程详解  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  佛山网站制作系统,佛山企业变更地址网上办理步骤？  如何用wdcp快速搭建高效网站？  jQuery中的100个技巧汇总  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  如何快速搭建高效香港服务器网站？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  Android中AutoCompleteTextView自动提示  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  如何选择可靠的免备案建站服务器？  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  如何在景安云服务器上绑定域名并配置虚拟主机？  昵图网官方站入口 昵图网素材图库官网入口  ,交易猫的商品怎么发布到网站上去？  网站制作报价单模板图片,小松挖机官方网站报价？  php485函数参数是什么意思_php485各参数详细说明【介绍】  Laravel如何使用Gate和Policy进行授权？（权限控制）  javascript读取文本节点方法小结  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  网站制作壁纸教程视频,电脑壁纸网站？  HTML 中如何正确使用模板变量为元素的 name 属性赋值  如何用美橙互联一键搭建多站合一网站？  Laravel如何升级到最新版本？（升级指南和步骤）  ,在苏州找工作，上哪个网站比较好？  如何在万网利用已有域名快速建站？  如何快速配置高效服务器建站软件？  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  jQuery validate插件功能与用法详解  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  如何用虚拟主机快速搭建网站？详细步骤解析  Linux后台任务运行方法_nohup与&使用技巧【技巧】  Swift中switch语句区间和元组模式匹配  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  Laravel怎么清理缓存_Laravel optimize clear命令详解  Python文件操作最佳实践_稳定性说明【指导】  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？