原创

涟漪效果是怎么实现的

其实,很简单很简单,我要画几张图。

之前 #vue-touch-ripple 是基于 rippleJS 实现的,rippleJS 是一个封装好的库,时间有些早了。

突发奇想,想用 vue 的思路将组件重构,所以,最终是目前最新版这么个结构:

  • ripple.vue 涟漪容器,用于控制涟漪层的渲染、配置的计算和传递、单个涟漪体的坐标和大小的计算、涟漪动画队列的维护和更新
  • core.vue 单个涟漪体本身,实例完成后即开始动画,动画使用定时器触发结束,结束后通知涟漪容器销毁自身

思路

点击一个元素,触发一次涟漪效果,涟漪效果不受任何外部条件影响(除非路由跳转释放了整个宿主组件);

涟漪效果结束时(定时器触发),涟漪体向宿主组件(涟漪容器)发出结束信号,容器组件释放对应涟漪体(从动画队列/数组中删除此涟漪体);

在执行释放时,需要检查鼠标是否抬起,如果鼠标未抬起,且目标涟漪体为动画末尾,则需要维持最后一位动画直至鼠标抬起;

涟漪容器的渲染时间应该 === 动画队列的首位渲染开始前 + 末尾渲染结束后,而动画队列的动画统一由 vue 内置的 transition-group 驱动, 所以需要使用 @enter@after-leave 时间来标记动画周期;

又因为动画队列在不断地迭代、渲染、释放,所以必须手动维护一个动画池计数,用以标记动画是否彻底完成,所以涟漪容器内部维护了一个 rippleCount 计数器,当计数器为 0 时,即为所有动画已释放之后,则可以释放涟漪宿主容器。

是不是晦涩难懂。没关系,我看得懂就行。

涟漪尺寸,这是个涉及点数学的问题,就是要计算出两个点之间的距离,看下面的图:

图好难画,就随便画一个吧!

https://static.surmon.me/18-1-24/24823892.jpg

最早以为初始化一个 1px 的圆,放大至对应的比例就可以,还可以减小渲染开销,没想到的是,放大后锯齿模糊了。

于是乎,初始化圆的时候便直接计算出 1:1 的尺寸,然后初始时缩放为 0.1 就可以了。

好了好了,就这样,代码在这

现在我已经将博客的弹幕功能也使用这种分离的思路实现了,非常棒,我怎么这么优秀!

本文于   2018/1/24 下午  发布在  宁静寺  分类下,当前已被围观  2606  次

相关标签: Vue Css Javascript

永久地址: https://surmon.me/article/84

版权声明: 自由转载-署名-非商业性使用   |   Creative Commons BY-NC 3.0 CN