超火的 2D 动画库,可模拟一切物理效果!

770 阅读2分钟

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

最近在浏览一个网站的时候,发现一个很有意思的动画效果,下图这些元素就像是一件件物品一样散落在每个角落

image.png

并且可以通过鼠标去拖动这些物体的移动,其他物体也会受到影响,非有趣

matter-1.gif

Matter-js

找寻了一番发现这个效果是通过 Matter-js 这个库来实现的

image-1.png

Matter.js是一个灵活的、开源的 2D 物理引擎,它可以帮助开发者在网页和 JavaScript 应用中实现物理效果。这个库是用 JavaScript 编写的,可以轻松集成到 HTML5 游戏和交互式应用中。Matter.js 提供了一套完整的物理模拟功能,包括质量、摩擦、碰撞检测、重力 和更多。

初步看了一下源码,这个库是基于Canvas画布去实现的,技术含量肯定是比较高的

以下例子源代码以及 demo 都在:brm.io/matter-js/d…

大摆锤

matter-7.gif

动量守恒

matter-2.gif

跷跷板

matter-3.gif

流水粒子

matter-4.gif

散落的物品

matter-5.gif

摆动

matter-6.gif

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
  • 一个偏前端的全干工程师;
  • 一个不正经的掘金作者;
  • 一个逗比的B站up主;
  • 一个不帅的小红书博主;
  • 一个喜欢打铁的篮球菜鸟;
  • 一个喜欢历史的乏味少年;
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有10000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点