微信小程序开发之『弹出菜单』特效
先看下效果图.
代码:
1.popMenu.js
-
Page({
-
data: {
-
isPopping: false,//是否已经弹出
-
animPlus: {},//旋转动画
-
animCollect: {},//item位移,透明度
-
animTranspond: {},//item位移,透明度
-
animInput: {},//item位移,透明度
-
},
-
//点击弹出
-
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")
-
},
-
//弹出动画
-
popp: function () {
-
//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({
-
animPlus: animationPlus.export(),
-
animCollect: animationcollect.export(),
-
animTranspond: animationTranspond.export(),
-
animInput: animationInput.export(),
-
})
-
},
-
//收回动画
-
takeback: function () {
-
//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({
-
animPlus: animationPlus.export(),
-
animCollect: animationcollect.export(),
-
animTranspond: animationTranspond.export(),
-
animInput: animationInput.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' // 分享路径
-
}
-
}
-
})
2.popMenu.wxml
-
<view>
-
<image src="/pages/images/collect.png" class="img-style" animation="{{animCollect}}" bindtap="collect"></image>
-
<image src="/pages/images/transpond.png" class="img-style" animation="{{animTranspond}}" bindtap="transpond"></image>
-
<image src="/pages/images/input.png" class="img-style" animation="{{animInput}}" bindtap="input"></image>
-
<image src="/pages/images/plus.png" class="img-plus-style" animation="{{animPlus}}" bindtap="plus"></image>
-
</view>
3.popMenu.wxss
-
.img-plus-style {
-
height: 150rpx;
-
width: 150rpx;
-
position: absolute;
-
bottom: 250rpx;
-
right: 100rpx;
-
z-index: 100;
-
}
-
.img-style {
-
height: 150rpx;
-
width: 150rpx;
-
position: absolute;
-
bottom: 250rpx;
-
right: 100rpx;
-
opacity: 0;
-
}