canvas实现iPhoneX炫彩壁纸屏保外加pixi.js流体动效

这篇文章发布于 2017年12月14日,星期四,01:23,归类于 canvas相关。 阅读 20875 次, 今日 21 次

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

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

随便截几张效果图:

iPhoneX炫彩壁纸效果截图1 iPhoneX炫彩壁纸效果截图2 iPhoneX炫彩壁纸效果截图3

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

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见下表:

API名称 默认值 释义
container document.body 用来append canvas绘制的多彩壁纸的容器
size [512, 512] 绘制的canvas画布的尺寸,2个值,分别表示宽度和高度
grid [2, 3] canvas画布上用来显示色块的格栅区域,2个值,分别表示横向分隔和纵向分隔。
backgroundColor #E0DEE6 画布背景色,默认为浅色
colors [‘#F24592’, ‘#36129A’, ‘#FDFB39’, ‘#5DB7EE’, ‘#E74C45’, ‘#E5243F’] 多彩壁纸使用的颜色们,颜色与格栅区域是一一对应的。
animation true 是否使用流光溢彩的动画效果(如果true,则需要加载pixi.js资源)

如果我们只要一个静态的流光溢彩的壁纸,则上面JS就已经足够了外加设置animationfalse即可。合起来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中绘制了下面的不规则区域形状(重要的是曲线边缘):

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,贝塞尔曲线,数学函数等,最后,看到一些效果的时候脑中自然就有了实现的想法。

冰冻三尺非一日之寒。

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

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

就这些,感谢阅读!

(本篇完)

分享到:

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×
想高薪入职阿里? ×
想通过真实互联网项目成长自己? ×


发表评论(目前19 条评论)

  1. 前端界路人乙说道:

    毕竟扛把子,高产似母˙Ꙫ˙

  2. 一切归零说道:

    安卓手机 QQ浏览器 没有高斯模糊啊

  3. kj说道:

    是DisplacementFilter不是DisplacementMapFilter吧。

  4. 噩梦无限说道:

    酷炫,不知道项目中使用页面会不会卡。

  5. humphry说道:

    这个可以通过 https://pair-code.github.io/deeplearnjs/ 来绘制,机器学习x前端,感觉是不是棒棒哒

  6. 初来匝道说道:

    好酷炫!!喜欢

  7. 倾听静茹说道:

    DEMO中safari下面canvas的高斯模糊失效了

  8. Hal74说道:

    每次看了你的文章都想往前走,结果现实总是给你往后推ORZ

  9. 龙陇说道:

    “大家学习前端其实也是类似的,慢慢学习,不断积累,每天成长,假以时日回过头来一看,卧槽,我什么时候成了前端界的技术杠把子了!”
    我就喜欢看张老湿一本正经的胡说八道却不得不服的装X( ̄▽ ̄)~*

  10. 小狗跳舞说道:

    一大早看到扛把子的文章真是心情舒畅

  11. lwbjing说道:

    虽然看上去很难实现,实际上确实是很难实现

  12. wbpmrck说道:

    积累+思考,说的不错,鑫旭兄

  13. 依韵说道:

    冰冻三尺非一日之寒。我是完全没看懂。