by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6614
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、iPhone X风格炫彩壁纸效果先体验

这个效果我想实现已经很久了，最近排上日程，花时间研究和试验了下，个人觉得效果还行，拿出来给大家分享一下。

随便截几张效果图：

每次刷新都会随机生成一个壁纸。

Demo页面在这里，您可以狠狠的点击这里：iPhoneX炫彩壁纸背景demo（含动效）

如果您的浏览器开启了GPU加速，则可以看到炫彩的背景实际上是在不断流动的。

二、如何把这个壁纸效果用在自己项目中？

步骤如下：

1. 引入我写的JS，colorful-min.js：

<script src="./colorful-min.js"></script>

很小，压缩就3K多点。

2. 根据API调用colorfulBackground方法，例如demo页面的调用JS：

colorfulBackground({
  container: document.getElementById('container'),
  size: [800, 1600]  
});

完整可用API见下表：

如果我们只要一个静态的流光溢彩的壁纸，则上面JS就已经足够了外加设置animation为false即可。合起来JS示意：

<script src="./colorful-min.js"></script>
<script>
colorfulBackground({
  container: document.getElementById('container'),
  animation: false,
  size: [800, 1600]  
});
</script>

但是，如果你希望和demo一样，色彩要不断流淌交融，则需要引入pixi.js，如下：

<script src="https://cdn.bootcss.com/pixi.js/4.6.2/pixi.min.js"></script>

其他任何资源都不需要加载，也不需要额外语句，只要在调用之前引入即可。

三、iPhoneX绚丽壁纸背景以及动效的实现原理

1. iPhoneX绚丽壁纸实现原理

使用canvas绘制的。

首先，根据grid把我们的画布分成若干区域，如下图所示：

然后沿着四周区域，创建山峰形状的贝塞尔曲线，曲线位置均朝向画布的中心，示意如下：

如果对贝塞尔曲线不了解了可参考我之前的文章：“深度掌握SVG路径path的贝塞尔曲线指令”

当然，实际创建的时候，无论是位置还是高度的随机性都要比上面示意图高很多，例如，下图就是一个实际呈现效果：

最后使用高斯模糊淡化边缘细节，效果就达成了，如下对应截图所示：

由于色块区域尺寸和位置创建都是随机的，因此我每次刷新我们得到的背景图都是唯一不重复的。

2. iPhoneX绚丽壁纸动效实现原理

上面介绍的是静态效果实现原理，那动态液体扭曲流淌效果又是怎么实现的呢？

本质上是使用的webGL技术，但webGL我之前并没有学习过，仅知道些皮毛，无法应付这样的效果实现。于是我就求助业界一些开源框架，页面webGL开发框架有例如three.js, Babylon.js以及这里使用pixi.js等。

我这里使用的是pixi.js，官网地址：http://www.pixijs.com/

pixi.js虽然底层使用webGL，但主要面向的还是实现2D动效，对于不支持webGl浏览器可以自动降级使用2D canvas API实现，跟我这里的需求更符合一些。

pixi.js本身提供了一些滤镜效果，可以方便的实现诸如水波，流动，烟雾等效果，尤其是用图片作为滤镜素材的时候，其实有很多更酷的效果。

例如，本demo中的流动就是借助了下面的素材。

首先，我在illustrator中绘制了下面的不规则区域形状（重要的是曲线边缘）：

然后另存为SVG文件，获取每个形状的路径，然后绘制在canvas画布上，代码如下：

['M125-51c0,0-72.5,150...-51z', 'M505,...151.5z', 'M1950,...132z', 'M633....451z', 'M-347.5....889.395z', 'M12...102.931z'].forEach(function (path) {
    var path2d = new Path2D(path);
    context.fillStyle = 'rgba(0,0,0,'+ Math.random() +')';
    context.filter = 'blur(30px)';
    context.fill(path2d);
});

此时我们的canvas画布图片就可以作为滤镜素材图片了，借助DisplacementMapFilter，pixi会自动根据明暗对比进行滤镜化处理。

此时，就可以利用pixi的ticker不断对滤镜素材图片进行旋转，我们的动效就有了。

补充说明

由于这个特效本身带有液化和扭曲，因此画布的边缘是不规则的，有可能是透明镂空的，因此，实际上我们的画布大小需要设置比可是窗口要大一些，用来隐藏不需要的边缘细节。

四、结束语

本文的效果虽然看上去很难实现，实际上确实是很难实现，虽然从代码量上来看就那么点代码，比平时写个简单的UI组件代码还少，但是却需要很多在图形以及可视化领域有很多积累。要是一两年前的自己估计也没有什么实现思路。

就这样慢慢积累一些基础知识，如canvas API，贝塞尔曲线，数学函数等，最后，看到一些效果的时候脑中自然就有了实现的想法。

冰冻三尺非一日之寒。

大家学习前端其实也是类似的，慢慢学习，不断积累，每天成长，假以时日回过头来一看，卧槽，我什么时候成了前端界的技术杠把子了！

本文介绍的是我的实现方法和原理不一定是最好的，也欢迎有其他更好想法和实现的小伙伴一起分享你的见解。

就这些，感谢阅读！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=6614

（本篇完）