使用Android开发微信小程序弹出菜单代码
[摘要]这篇文章主要介绍了利用Android开发微信小程序弹出菜单代码的相关资料,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下先给大家展示下效果图，具体效果图如下所示：具体代码如下所示: 1....
这篇文章主要介绍了利用Android开发微信小程序弹出菜单代码的相关资料,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下先给大家展示下效果图，具体效果图如下所示：
具体代码如下所示:
1.index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
isPopping: false,//是否已经弹出
animationPlus: {},//旋转动画
animationcollect: {},//item位移,透明度
animationTranspond: {},//item位移,透明度
animationInput: {},//item位移,透明度
//我的博客:http://www.php.cn/
//CSDN微信小程序开发专栏:http://www.php.cn/
},
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>