微信小程序开发之圆形菜单 仿建行圆形菜单实例
建行APP首页有个圆形菜单.仿了个玩具出来. 功能介绍: 1.一个圆形背景.六个item菜单.中间是微信用户的头像; 2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,还会自动滚动一段时间; 上一张真机截图: 上代码: 1.index.js },buttonMove: function (e) {
//获取滑动时的时间 var downTime = Date.now(); this.setData({ downTime: downTime }) var that = this; var endPoint = e.touches[e.touches.length - 1] //根据触摸位置计算角度 var x = endPoint.clientX - this.data.dotPoint.clientX; var y = endPoint.clientY - this.data.dotPoint.clientY; var moveAngle = Math.asin(y / Math.hypot(x,y)) 180 / Math.PI var quadrant = 1; if (x >= 0) { quadrant = y >= 0 ? 4 : 1; } else { quadrant = y >= 0 ? 3 : 2; } var tempAngle = 0; // 如果是一、四象限,则直接end角度-start角度,角度值都是正值 if (quadrant == 1 || quadrant == 4) { tempAngle += moveAngle - this.data.startAngle; } else // 二、三象限,色角度值是负值 { tempAngle += this.data.startAngle - moveAngle; } var menuConfig = app.menuConfig.menu; var menuList = []; for (var i = 0; i < this.data.menuList.length; i++) { menuList.push({ deg: this.data.menuList[i].deg + tempAngle,src: menuConfig[i].src }); } this.setData({ menuList: menuList }) //重置开始角度 this.setData({ startPoint: e.touches[e.touches.length - 1] }) var endX = this.data.startPoint.clientX - this.data.dotPoint.clientX; var endY = this.data.startPoint.clientY - this.data.dotPoint.clientY; var startAngle = Math.asin(endY / Math.hypot(endX,endY)) 180 / Math.PI; this.setData({ startAngle: startAngle,tempAngle: tempAngle }) },buttonEnd: function (e) { // 计算,每秒移动的角度 var that = this; var upTime = Date.now(); var angleSpeed = this.data.tempAngle * 1000 / (upTime - this.data.downTime); if (Math.abs(angleSpeed) < 100) { //速度小于100时,停止滚动 return } else { //速度大于100时,自动滚动 if (angleSpeed > 0) { if (angleSpeed > 500) angleSpeed = 500 var animationRun = wx.createAnimation({ duration: 2000,//ease-out结束时减速 timingFunction: 'ease-out' }) that.animationRun = animationRun animationRun.rotate(angleSpeed).step() that.setData({ animationData: animationRun.export(),}) } else { if (angleSpeed < -500) angleSpeed = -500 angleSpeed = Math.abs(angleSpeed); var animationRun = wx.createAnimation({ duration: 2000,// ease-out结束时减速 timingFunction: 'ease-out' }) that.animationRun = animationRun animationRun.rotate(-angleSpeed).step() that.setData({ animationData: animationRun.export(),}) } } } }) 2.index.wxml 3.index.wxss .circle-out {
margin: 75px auto; position: relative; width: 350px; height: 350px; border-radius: 50%; background-color: #415cab; } .userinfo-avatar { /*子控件的透明度等于父控件透明度子控件透明度,父控件的opacity设置后,所以子控件opacity设置为1依然无效,必须分离开 .circle-in { /*菜单/ .menu-list { .menu-item { .menu-circle-item { .image-style { .text-style { /***/ .menu-circle-text-item { js注释补充: 获取手指抬起时的角速度 1.获取角度.借图说话. Math.sqrt( x * x + y * y )是斜边长,乘以 sin a 就是 y 的长度; 获取a的角度:Math.asin(y / Math.hypot(x,y) ; [ hypot是x * x + y * y ] 2.根据角度差计算角速度 3.当角速度小于100的时候触摸滑动停止,不自动滚动;大于100时,自动滚动.我这里用动画,有个问题:很难把握动画持续时间和速度的关系.总感觉不够流畅.我表示不能忍. 4.分象限的问题.看看代码就知道了.主要是根据up时的触摸点相对于圆点的X轴差值来计算.大于0就是一四象限.小于0就是二三象限. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |