使用nipple.js创建前端虚拟摇杆

使用nipple.js创建前端虚拟摇杆功能。这个是在开发项目中，遇到的一个技术点，因为想要像控制玩具汽车一样，所以参考了王者荣耀，无人机页面等，最终想要一个虚拟摇杆功能，然后我先搜索了下相关的组件，然后发现了nipple.js

nippleJs是一个虚拟摇杆的js库，专为可触摸的设备提供接口，常被用于游戏和可操作硬件设备的app或网页中

nipple.js  demo

nipple.js 官网

根据nipple.js，最后想要实现的概念图：

nipple 的安装就不多说了，下面主要讲讲遇到的问题

1. react中通过document.getElementsByTagName(‘span’)[0]的方式来获取nipple的创建区域，总是获取不到，然后查了一下好像是因为还没有渲染完成所以无法获取到区域，然后放到了setTimeout里，延时时间设置为0，就可以了
   
   

   
   
   

2. 后期当然了，按照传统，公司肯定会让你改改改，所以最后又重新改了版，具体样式如下图(似乎高大上了一点儿）：
   
   

   
   
   

   代码写出来的一个大致草稿：
   
   

   
   
   

   对比之前的样式也是大同小异，只是摇杆的背景需要自定义了，不能直接使用默认创建的摇杆样式，所以查看了一下摇杆的元素，摇杆主要就是前后两块块级元素做的，样式名称分别是.front和.back，注意要加 !important 来强制约束
   
   
   
   
   

最终，使用nipple.js创建的摇杆，在页面中使用起来还是比较丝滑的，移动时，背景会有渐变的动效，而且比较好的一点是，它可以支持同时创建多个摇杆，这样对于像无人机操作这样的双摇杆界面也可以支持。