본 글은 위챗 애플릿 팝업 메뉴 코드 개발 시 안드로이드 관련 정보를 주로 소개하고 있으니, 필요하신 분들은 참고하시면 좋을 것 같습니다.
먼저 렌더링을 보여드리겠습니다.
구체적인 코드는 다음과 같습니다.
1 .index.js
//index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度 //我的博客://m.sbmmt.com/ //CSDN微信小程序开发专栏://m.sbmmt.com/ }, 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
아아앙3.index.wxss
아아아아위 내용은 Android를 사용하여 WeChat 애플릿 팝업 메뉴 코드 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!