Vue组件设计-实现水波涟漪效果的点击反馈指令.docx

? ? Vue组件设计 - 实现水波涟漪效果的点击反馈指令 ? ? 点击上方?程序员成长指北，关注公众号 回复1，加入高级Node交流群 点击反馈 不知道小伙伴们有没有注意过这样一个细节，有的应用按钮，链接，可交互的卡片点击起来十分有感觉，而有的却像是点在白纸上了一样，是什么造成了他们使用户有如此明显的感受区分呢?.... 1.jpg 鼠标移入时的小手、鼠标点击时按钮下压弹起的动画、触屏应用点击时的屏幕震动，这些效果都给予用户一种是我的行为产生了这样的效果的直觉，这些效果也被统称为点击反馈，虽然看似是应用中的细枝末节，但是只要稍微投入一点点心思，带来的用户体验提升是十分明显的 水波效果 这里作者为小伙伴们推荐一种作者最喜欢的点击反馈效果。当用户点击时，会以点击中心为圆心产生一个水波扩散的涟漪效果，适用各个场景，美观又不浮夸，关键是可以给用户带来很直观的反馈。 ripple_01.gif 来看实现 首先这里基于Vue3自定义指令进行封装，Vue3的自定义指令跟Vue2相比变动不是很大，详细说明请看Vue3自定义指令。我们的目标是完成一个水波指令的基本原型，这里循序渐进展开。 定制一个水波纹默认样式 水波纹实际上就是通过用户点击的位置生成一个小圆圈，并且尺寸逐渐扩大到整个被点击元素的一个过程，所以这里先制定一个水波基本的样式，并设置好过度动画，过度动画应该是一个先慢后快的一个过程，这里使用贝塞尔曲线定制，不清楚如何调试动画曲线的可以看这一篇文章 .my-ripple?{ ??position:?absolute; ??top:?0; ??left:?0; ??z-index:?100; ??border-radius:?50%; ??background-color:?currentColor; ??opacity:?0; ??transition:?transform?0.2s?cubic-bezier(0.68,?0.01,?0.62,?0.6),?opacity?0.08s?linear; ??will-change:?transform,?opacity; ??pointer-events:?none; } 复制代码 计算水波纹的位置和直径 如果确定了水波的直径、创建时的(x,y)、过度动画结束时的(x,y)，我们就可以通过transition去渲染水波动画了，创建时的(x,y)就是用户点击的位置，但是水波的直径和过度动画结束时的(x,y)怎么计算呢？我们的元素都是矩形，不论用户从元素的任意坐标进行点击，以矩形斜边作为直径的圆都可以完美的覆盖整个元素，斜边的计算我们利用小学数学知识求两边平方和进行开方得到，下面是过度动画结束时的水波推演图。 第一个箭头:?期望得到的水波第二个箭头:?元素(0,0)点创建的水波第三个箭头:?元素(0,0)点创建的水波, 不带圆角效果 A8214090-1AC5-4091-BEF0-CFA38B105E35.png 我们可以发现通过元素(0,0)点创建的水波进行一定偏移就可以得到我们想要的水波,由此我们可以推断出 动画结束时的水波的尺寸?=?圆的斜边创建时的(x,y)?=?用户点击的位置过度动画结束时的(x,y)?=?元素(0,0)点创建的水波进行x和y的偏移得到 function?computeRippleStyles(element,?event)?{ ??const?{?top,?left?}?=?element.getBoundingClientRect() ??const?{?clientWidth,?clientHeight?}?=?element ?? ??const?radius?=?Math.sqrt(clientWidth?**?2?+?clientHeight?**?2)?/?2 ??const?size?=?radius?*?2 ?? ??const?localX?=?event.clientX?-?left ??const?localY?=?event.clientY?-?top ??const?centerX?=?(clientWidth?-?radius?*?2)?/?2 ??const?centerY?=?(clientHeight?-?radius?*?2)?/?2 ??const?x?=?localX?-?radius ??const?y?=?localY?-?radius ??return?{?x,?y,?centerX,?centerY,?size?} } 复制代码 鼠标按下时创建水波 然后我们需要在鼠标按下时创建水波，监听鼠标按下的事件，这里以pc端为例子，刚创建水波时使用transform缩小到0.3，这是作者尝试过相对合适的创