007 - 微信小程序开发之弹出菜单
2017-01-23 13:15
751 查看
周五.玩具一枚.
gif:
代码:
1.index.js
2.index.wxml
3.index.wxss
demo代码下载
gif:
代码:
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中微信小程序开发之弹出菜单
- 微信小程序开发之『弹出菜单』特效
- 微信小程序开发之弹出菜单
- 微信小程序开发之『弹出菜单』特效
- 微信小程序开发之弹出菜单
- 微信小程序实现弹出菜单功能
- 微信小程序开发之圆形菜单 仿建行圆形菜单实例
- 微信小程序开发— 菜单内容左右联动 & MD5加密
- 微信小程序开发—弹出框
- 微信小程序开发之圆形菜单 仿建行圆形菜单
- 【小程序】微信小程序开发—弹出框
- 微信小程序开发之顶部滑动导航菜单
- 微信小程序弹出操作菜单
- 微信小程序开发教程-抽屉菜单
- 微信小程序--类似弹出菜单特效,从右向左滑出
- 微信小程序学习(3)-开发工具菜单介绍
- 微信小程序开发学习笔记007--微信小程序项目01
- 微信小程序实现弹出菜单
- 微信小程序开发----一打开小程序出现选择弹出框