《明日方舟》签到效果实现
时间：2023-03-30 19:07:43
CSS
之前写过一篇《明日方舟》前端界面复现，其中一个日常签到页面有一个聚光灯效果，这次我们就来分析下它是如何实现的。效果演示的实际效果如图所示。当你移动到格子中的某个地方时，周围会出现聚光灯效果：在游戏中，好像使用了静态贴图。这可能是因为手游没有这样的互动动作，所以显得有些不尽如人意。在同一个win10中，也有类似的效果：这次，我们尝试在web中实现类似的效果。网页仿签到日历copepen：READMORE+《明日方舟》前端界面复制文章地址：READMORE+arknights-reactDemo地址：READMORE+arknights-react每日签到源码：READMORE+实现步骤分分为4个步骤。1.分离两层图层，数字层和网格层。将数字层置于网格层之上，就是这种感觉。实际dom的排列顺序应该是一样的，两层内容重叠，大小也一样。2.绘图在数字层绘制原始内容，在网格层绘制网格。//reacthookfunctionGrid(){//生成60个格子，其实多少无所谓，来就行了。const[list,setList]=React.useState(Array.from({length:60},(_,i)=>i+1))return({list.map(item=>)}{list.map(item=>{item})}
)}ReactDOM.render(
,document.getElementById('root'))效果如下蓝色边框代表我们的网格，而数字显示在单独的层中。copepen演示：阅读更多+3。显示掩码添加要显示的掩码。原理是利用mask的4个属性之一来控制mask。另外，添加一些细节来丰富它，让默认的文字是深色的，浮动的是白色的。.grid-border{//遮罩尺寸-webkit-mask-size:240px240px;//mask不重复-webkit-mask-repeat:no-repeat;//遮罩圆半径-webkit-mask-image:radial-gradient(circle,#fff,transparent120px);//maskposition-webkit-position:00;}效果如下：copependemo:READMORE+.4.控制面罩的移动。控制面罩移动。主要是控制mask的位置，所以我们需要两个坐标(x,y)来确定mask的位置。同时鼠标在格子上移动，离开时，设置(x,y)位置。//Reacthook实现函数Grid(){const[list,setList]=React.useState(Array.from({length:60},(_,i)=>i+1))const$border=React.useRef(null)const[x,setX]=React.useState(-500)const[y,setY]=React.useState(-500)//将遮罩移动到鼠标位置consthandleMouseMove=(e)=>{e.stopPropagation()constrect=$border.current？$border.current.getBoundingClientRect():nullsetX(e.pageX-(rect?rect.x:-500)-150)setY(e.pageY-(rect?rect.y:-500)-150)}//设置掩码隐藏consthandleMouseLeave=()=>{setX(-500)setY(-500)}return(
{list.map((item)=>())}{list.map((item)=>({item}))} )}//...效果如下：copependemo:READMORE+以上就是完整的效果！总结一下，完成日历效果一共需要4个步骤：分离数字层和网格层两层，在数字层上绘制初始内容，在网格层上绘制网格。添加蒙版显示。控制面罩移动。至于其他的页面布局细节，这里就不介绍了。如果想了解更多，可以阅读源码或者在下方评论。源码地址网页仿签到日历copepen：READMORE+《明日方舟》前端界面复制文章地址：READMORE+arknights-reactdemo地址：READMORE+arknights-react每日签到源码：READMORE+
