River_何

最近前端圈的量子纠缠交互动效爆火，相信大家都了解了其中的实现原理，这里我再简单的介绍下，不了解的同学可以学习一波。

前段时间将我的开源项目visualization-collection进行了重构，该项目目前有2.6k的star数，对着之前React版本的重新开发并发布了一个Vue版本的。

前段时间完成了自己的图片处理工具，纯前端实现，不借助第三方图片处理库，收获颇多。在开发的过程中也是遇到了各种问题，所以想通过这篇文章进行一个技术总结和分享。

经过一个多月断断续续的开发，终于将这个图片处理工具的所有功能都开发完了，包括有基础操作、矩形裁剪、圆角裁剪、修改尺寸、等九大模块，几乎是包含了图片处理的所有功能。

今天就向大家隆重介绍这个开源项目：visualization-collectio，一个专注于前端视觉效果的集合应用，里面有大量的前端设计和丰富的动效案例。

今天我就和大家分享一个非常好用的库，一个专门用于在Canvas上实现球体碰撞和球体交互场景的库--sphere-collision，通过简单配置便可快速实现碰撞效果，而且还提供了钩子函数，扩展性极强。

要实现鼠标交互就必须通过监听Canvas的mousemove事件，拿到鼠标的实时位置，然后每个小球在每一帧去检测鼠标是否在小球内，判断是否有鼠标与其交互。

实现Canvas动画，我们要学会使用面向对象的编程思想，这里要写一个球体的类，每个球都是new出来的一个个实例对象，这些实例对象上面有很多属性和方法，这样在操作每个球时只需要调用它们各自的方法就可以了

这篇文章我将带你从零到一手撸一个球体碰撞的交互效果，不使用任何第三方库，详细讲解每一步的实现逻辑，真正做到保姆级教学，这样才能保证你能从中学到原理上的东西，以后做Canvas动画时就可以做到信手拈来。