如何查看网站动画是如何实现的？

[Merlini]

最近为了提高一下自己的网站审美，在 https://www.awwwards.com/ 上浏览了很多网站，有点被震惊。 有些利用 WebGL 都可以做游戏了，感觉以后都是 canvas 的时代了，js 还得捡起来啊。

我自己肯定是做不出来这些东西，虽然有一丢丢前端基础，但是几乎可以忽略不计。但是看到一些好玩的动画效果，总想着给自己的网站也搞一个。

抛开那些非常花里胡哨的不谈，如果是简单的小动画，我该怎么模仿呢？ F12 好像也看不出什么。

就比如 https://14islands.com/ 这个网站，里面的气泡交互和最后画画的部分做的都非常好看，感觉也没难到劝退的地步。想学习借鉴一下，但也不知道从哪入手。

不知道各位前端大佬有没有比较推荐的学习方法，先在此谢过。

[rabbbit]

一般都是 GSAP 或者 webgl GLSL(那些 2d 的变形很多都是 webgl), CSS Houdini

[Merlini]

@rabbbit #1
如果想使用 GSAP 的话，是不是得自己设计图案之类的？
我刚刚查到好像有一个 2D 的 js 库叫 pixijs 好像专门用来做 2d 动画，那个能否做出类似的效果呢？

[oldshensheep]

Firefox => F12 => Debugger => Source 可以看到源码 （ Chrome 系的也行，自己试试）
大致看了一下，气泡效果是用的 https://github.com/ashima/webgl-noise
就是写个着色器，难度比较大。那个网站也是用的开源的东西
还有源码里面有 three.js 的库，应该用到了这个。
更多的去看看网站的源码吧。

[Merlini]

@oldshensheep #3 感谢大佬。代码如果经过混淆压缩的话，是不是看了也看不出来什么东西呢。