微信小程序实现弹出菜单动画
微信(小程序)  /  管理员 发布于 3年前   207
微信小程序动画之弹出菜单,供大家参考,具体内容如下
效果图
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:
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;}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号