Micro-Letter Small program development of the circular menu imitation CCB Circular Menu Example _javascript skills

The Construction Bank App homepage has a round menu. A toy came out.

function Introduction:

1. A circular background. Six item menu. The middle is the head of the micro-letter user;

2. Touch scrolling. The speed is more than the hour, refers to the rolling, the finger raises, the rolling stops, the speed is big, refers to the rolling, the finger raises, also will automatically roll for a period of time;

Previous screenshot of a true machine:

Code on:

1.index.js

var app = Getapp () Page ({data: {userInfo: {}, Menulist: {},//Menu collection animationdata: {}, StartPoint: {},//touch start D Otpoint: {},//dot coordinate startangle:0,//start angle tempangle:0,//Move angle downtime:0,//press time uptime:0,//raise time/ISRUNNING:FA lse,//is scrolling}, Onload:function () {var "= this//call method to apply instance to get Global data app.getuserinfo (function (userInfo) {//More New Data That.setdata ({userinfo:userinfo,})}) Wx.getsysteminfo ({success:function (res) {var windoww
    Idth = res.windowwidth * 0.5;
     That.setdata ({//DOT coordinates, X for screen half, y for radius and margin-top, px//back touch coordinates are PX, so this is directly px.)
  Dotpoint: {clientx:windowwidth, clienty:250}}})}, Onready:function (e) {var = this; App.menuconfig = {menu: [{' index ': 0, ' menu ': ' My account ', ' src ': '. /images/account.png '}, {' Index ': 1, ' menu ': ' Credit card ', ' src ': '. /images/card.png '}, {' Index ': 2, ' menu ': ' Investment banking ', ' src ': '. /images/investment.png '}, {' Index ': 3, ' menu ': ' Cash loan ', ' src': '.. /images/loan.png '}, {' Index ': 4, ' menu ': ' Featured service ', ' src ': '. /images/service.png '}, {' Index ': 5, ' menu ': ' Transfer remittance ', ' src ': '.  /images/transfer.png '}]}//Draw turntable var menuconfig = app.menuConfig.menu, Len = menuconfig.length, menulist  = [], Degnum = 360/len//text rotation turn value for (var i = 0; i < len; i++) {Menulist.push ({deg:i * degnum, Menu:
   Menuconfig[i].menu, src:menuconfig[i].src});
 Console.log ("menu:" + menuconfig[i].menu)} that.setdata ({menulist:menulist}); },//menu dragged three methods Buttonstart:function (e) {this.setdata ({startpoint:e.touches[0]}) var x = This.data.startP
  Oint.clientx-this.data.dotpoint.clientx;
  var y = this.data.startpoint.clienty-this.data.dotpoint.clienty;
  var startangle = Math.asin (Y/math.hypot (x, y)) * 180/MATH.PI;
  This.setdata ({startangle:startangle})}, Buttonmove:function (e) {//Get time to slide var downtime = Date.now (); This.setdata ({downtime:downtime}) var That's = this;
  var endPoint = e.touches[e.touches.length-1]//Based on touch position calculation angle 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; In the one or four quadrant, the direct end angle-start the angle, and the angle value is positive if (quadrant = 1 | | quadrant = = 4) {Tempangle + = Moveangle-this.data.starta
  Ngle;
  else//Two or three quadrant, the color angle value is negative {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, ME
  Nu:menuconfig[i].menu, src:menuconfig[i].src});
  } this.setdata ({menulist:menulist})//Reset Start angle 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) {//calculation, angle of movement per second V
  Ar that = this;
  var upTime = Date.now ();
  var anglespeed = This.data.tempAngle * 1000/(Uptime-this.data.downtime); if (Math.Abs (anglespeed) < 100) {//speed is less than 100, stop scrolling return} else {//speed greater than 100, automatic scrolling if (anglespeed > 0) {if (Anglespeed >) anglespeed = + var Animationrun = wx.createanimation ({duration:2000,//ea Deceleration at end of Se-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 at end of deceleration timingfunction: ' Ease-out '}) That.animationrun = Animationrun animationrun.rotate (-anglespeed). Step () That.setdata ({Animationdata:ani

 Mationrun.export (),})}}}

2.index.wxml

<view class= "Circle-out" >
 <view class= "circle-in" > <image class= "Userinfo-avatar" src= "
  {{ Userinfo.avatarurl}} "></image>
  <view class= menu-list" catchtouchmove= "Buttonmove" Catchtouchstart= "Buttonstart" catchtouchend= "Buttonend" > <view class= "menu-item"
   wx:for= "{{menuList}}" wx:key= "Unique" animation= "{Animationdata}}" > <view class= menu-circle-item "style="-webkit-transform
    : Rotate ({{item.deg}}deg); "data-menu=" {{item.menu}} "> <image class=" Image-style "src="
     {{item.src}} "> </image>
    </view>
    <view class= "Menu-circle-text-item" style=-webkit-transform:rotate ({{ ITEM.DEG}}DEG); " >
     <text class= "Text-style" >{{item.menu}}</text>
    </view>
   </view>
  </view>
 </view>
</view>

3.index.wxss

Page {background-image:url (' http://ac-ejx0nsfy.clouddn.com/ac767407f474e1c3970a.jpg ');
 background-attachment:fixed;
 Background-repeat:no-repeat;
Background-size:cover;
 }. circle-out {margin:75px auto;
 position:relative;
 width:350px;
 height:350px;
 border-radius:50%;
Background-color: #415cab;
 }. Userinfo-avatar {width:70px;
 height:70px;
 border-radius:50%;
 Position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
Margin:auto;
 The transparency of the/** child control equals the transparency of the parent control * child control transparency, the parent control opacity set, so the child control opacity set to 1 is still invalid and must be separated from/. circle-in {position:absolute;
 width:330px;
 height:330px;
 border-radius:50%;
 top:0;
 bottom:0;
 left:0;
 right:0;
 Margin:auto;
Background-color: #fff;
 }/** Menu/. menu-list {position:absolute;
 left:0;
 top:0;
 Width:inherit;
Height:inherit;
 }. menu-item {position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
font-weight:500;
 }. menu-circle-item {-webkit-transform-origin:50% 150px; transform-origin:50% 150px;
 margin:0 Auto;
 margin-top:15px;
 position:relative;
 height:50px;
 width:50px;
 Background-color: #77c2fc;
 Text-align:center;
border-radius:50%;
 }. image-style {height:25px;
 width:25px;
 Color: #f00;
MARGIN:12.5PX Auto;
 }. text-style {margin:5px auto;
font-size:15px;
 }/***/. menu-circle-text-item {-webkit-transform-origin:50% 100px;
 transform-origin:50% 100px;
 margin:0 Auto;
 position:relative;
 height:25px;
 Width:auto;
Text-align:center;


 }

JS Note added:

Gets the angular velocity of the finger when it is raised

1. Get the angle. Borrow the picture to speak.

MATH.SQRT (x * x + y * y) is the length of the hypotenuse, multiplied by sin a, which is Y;

Gets the angle of a: Math.asin (Y/math.hypot (x, y);

[Hypot is x * x + y * y]

2. Calculate angular velocity based on angle difference

3. When the angular speed is less than 100, the touch sliding stops, does not automatically scroll, is greater than 100, automatically scrolls. I have a problem with animation here: It's difficult to grasp the relationship between the duration and speed of the animation. I can't stand it.

4. The question of the quadrant. Look at the code. This is mainly based on the x-axis difference of the touch point relative to the dot. Greater than 0 is the 14 quadrant. Less than 0 is the two or three quadrant.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.