大家好，今天是星期一，今天我们为大家带来了新的微信小程序开发程序，页面弹出菜单动画。菜单是小程序里各功能栏目的链接入口，一个好的菜单将为你的小程序加分不少哦，而动画版的弹出菜单就添加的炫酷，我们先看看效果吧：
JS文件代码：
Page({
data: {
isPopping: false,
animPlus: {},
animCollect: {},
animTranspond: {},
animInput: {},
animCloud:{},
aninWrite:{},
},
//点击弹出
plus: function () {
if (this.data.isPopping) {
//缩回动画
this.popp();
this.setData({
isPopping: false
})
} else if (!this.data.isPopping) {
//弹出动画
this.takeback();
this.setData({
isPopping: true
})
}
},
input: function () {
console.log("input")
},
transpond: function () {
console.log("transpond")
},
collect: function () {
console.log("collect")
},
cloud:function(){
console.log("cloud")
},
write: function () {
console.log("cloud")
},
//弹出动画
popp: function () {
//plus顺时针旋转
var animationPlus = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationcollect = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationTranspond = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationInput = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationCloud = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationWrite = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
animationPlus.rotateZ(180).step();
animationcollect.translate(-90, -100).rotateZ(180).opacity(1).step();
animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step();
animationInput.translate(-90, 100).rotateZ(180).opacity(1).step();
animationCloud.translate(0, 135).rotateZ(180).opacity(1).step();
animationWrite.translate(0, -135).rotateZ(180).opacity(1).step();
this.setData({
animPlus: animationPlus.export(),
animCollect: animationcollect.export(),
animTranspond: animationTranspond.export(),
animInput: animationInput.export(),
animCloud: animationCloud.export(),
animWrite: animationWrite.export(),
})
},
//收回动画
takeback: function () {
//plus逆时针旋转
var animationPlus = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationcollect = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationTranspond = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationInput = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationCloud = wx.createAnimation({
duration: 400,
timingFunction: 'ease-out'
})
var animationWrite = wx.createAnimation({
duration: 400,
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();
animationCloud.translate(0, 0).rotateZ(0).opacity(0).step();
animationWrite.translate(0, 0).rotateZ(0).opacity(0).step();
this.setData({
animPlus: animationPlus.export(),
animCollect: animationcollect.export(),
animTranspond: animationTranspond.export(),
animInput: animationInput.export(),
animCloud: animationCloud.export(),
animWrite: animationWrite.export(),
})
},
onLoad: function (options) {
// 生命周期函数--监听页面加载
},
onReady: function () {
// 生命周期函数--监听页面初次渲染完成
},
onShow: function () {
// 生命周期函数--监听页面显示
},
onHide: function () {
// 生命周期函数--监听页面隐藏
},
onUnload: function () {
// 生命周期函数--监听页面卸载
},
onPullDownRefresh: function () {
// 页面相关事件处理函数--监听用户下拉动作
},
onReachBottom: function () {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function () {
// 用户点击右上角分享
return {
title: 'title', // 分享标题
desc: 'desc', // 分享描述
path: 'path' // 分享路径
}
}
})
WXML文件代码：
<view>
<image src="../../image/1.png" class="img-style" animation="{{animWrite}}" bindtap="write"></image>
<image src="../../image/4.png" class="img-style" animation="{{animCollect}}" bindtap="collect"></image>
<image src="../../image/2.png" class="img-style" animation="{{animTranspond}}" bindtap="transpond"></image>
<image src="../../image/3.png" class="img-style" animation="{{animInput}}" bindtap="input"></image>
<image src="../../image/5.png" class="img-style" animation="{{animCloud}}" bindtap="cloud"></image>
<image src="../../image/6.png" class="img-switch-style" animation="{{animPlus}}" bindtap="plus"></image>
</view>
WXSS文件代码：
.img-switch-style {
height: 120rpx;
width: 120rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
z-index: 100;
}
.img-style {
height: 120rpx;
width: 120rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
opacity: 0;
}
OK，通过以上代码就可以为你的小程序增加非常炫酷的弹出菜单了，希望今天的内容对你的微信小程序开发有所帮助。
网站