微信小程序实现弹出菜单动画
程序员文章站
2023-09-08 10:50:58
微信小程序动画之弹出菜单,供大家参考,具体内容如下
效果图
js:
page({
data: {
ispopping: false,
an...
微信小程序动画之弹出菜单,供大家参考,具体内容如下
效果图
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 详解Vue一个案例引发「内容分发slot」的最全总结
下一篇: Vue.js 图标选择组件实践详解