手把手教你制作有趣动态二维码

前言

随着智能手机的普及，移动互联网的迅猛发展，二维码肩负着越来越重要的任务。

看网页要扫二维码，加好友要扫二维码，支付要扫二维码，骑车要扫二维码，甚至连楼下卖早点的摊子都有一个收费二维码。

那么你真的了解二维码吗？

    

上面的两张二维码图，你更愿意扫哪一张呢？

答案不言而喻，肯定都会先扫第一张，因为有趣好玩，又没有这么枯燥。

所以接下来小仙女就教大家怎么制作这种有趣好玩的动态二维码吧，跟着我的beat一起学习吧！

了解二维码的原理

在制作炫酷的动效二维码之前，首先要了解二维码的基本概念和原理。

二维码是一种比一维码更高级的条码格式，它可以在水平和垂直方向也就是x轴与y轴上存储信息，存储汉字、数字和图片等信息，因此二维码的应用领域要比条形码广得多。

我们平时最常用的那种是QR Code，QR即“Quick Response”的缩写，意为快速识别。QR code最早由日本人发明，应用于汽车制造，目的是对生产流程中的每一个零件进行追踪。

二维码的存储原理为二进制，在二维码中，白色的方块代表0，黑色的方块代表1。

其实我们也不必完全了解二维码的所有原理，但是如果我们要制作动态二维码，必须牢记它的识别原理。

二维码的识别原理

二维码的识别原理如下图，每个色块担负着不同的数据存储任务。

红色和蓝色区域是最重要的部分，因此我们设计二维码的时候，一定不能删改这两个区域的图案，不然就不能识别出二维码。

我在设计动态二维码时，曾出现过可以被扫描识别却不能被长按识别的问题，为此不得不一步步的寻找原因。最后找到了原因，引申出一个与识别率息息相关的知识点：二维码的容错率。容错率是指二维码在正常识别的前提下可被遮挡的部分占总二维码面积的百分比。容错率越高，可被遮挡的面积越大，二维码图案也越复杂。

在容错率一定的情况下，二维码包含的信息越多，二维码也会越复杂。当原始二维码的图案无法满足创意需要时，就可以利用二维码的容错机制，增加或删除一些栅格，甚至可以遮挡部分图形。一般来说，小仙女建议大家创作动态二维码的时候，可以把容错率设置成7%或15%最为合适，图形相对比较简单，方便我们去美化创作。

ok，事不宜迟，了解这么多的二维码基础知识之后，我们就可以开始进入二维码的美化吧。

优化二维码

首先我们去网上找一个二维码编辑器，有挺多这样的网站，微微二维码、草料二维码等网站，小仙女在这里推荐的是微微二维码，https://www.wwei.cn/  以轻考公众号为例，首先上传轻考公众号的二维码，然后容错率选7%，生成二维码可以根据自己的喜欢去选择圆点、直角或液态，每选一次，按修改二维码就会生成一个样式的二维码，如果不喜欢还可以再按修改二维码就会重生排列二维码，直到自己满意为止

，然后选择png格式下载或者eps、svg也行，看自己喜欢，把它拉进AI里面进行下一步的操作。

先嵌入图片——图像临摹（高保真度照片）——扩展

接着就是把所有黑格子全部填充自己的创意设计。建议要结合公司的产品特色或者自己想要制作的主题去创作小元素，基本制作4、5个元素便可，记得因为我们的容错率是7%，所以我们要确保填充的图案要十分饱满填充整个黑色部分，可以有超出的部分但是不易过多，一点点可以忽略不计，如果创作的元素不饱满填充，那也最低满足80%的覆盖范围（自己测试过的），每做好一步都可以截图发到微信，右击看是否能识别，记住要经常检查是否能识别，不然有一个没做好识别不到，不这样一步一步测试，后面就更加找不到原因了。颜色的明暗也有关系，建议创作的二维码的替换元素和背景颜色的对比高一定要高，不然系统是无法识别出来的。所以调颜色的时候，所有替换元素的明暗程度要基本一致，不然明暗不统一，系统无法识别。

设计好之后，我们可以根据公司的产品增加场景，使得不这么单调，变得场景化有寓意，因为我的公司是做在线教师资格证培训的，所以我制作了一些学校的背景场景，为了更酷炫好玩，我也增加了一些动效的效果。制作动效效果这里就不详说了，原理就是把AI里面的图层组合复制黏贴到PS里面，有动效的图层单独黏贴哦，没有的图层可以一起复制也行。用PS里面的时间轴制作动效效果。

最后再测试一下，是否能识别二维码，没有问题就可以导出gif格式噜！！就是这样，一个动态二维码就诞生啦，是不是小激动呢！晒出我做了两天的成果图：

最后希望你们都能从我这篇干货学到点知识哦，第一次写教程，不要嫌弃小仙女的文笔哈，不喜勿喷，喜欢的多多转发和点赞！！