简年6：H5创意 | 我把新春的祝福藏在雪花里带给你

又到了一年一度的新春佳节，是不是有满满的祝福想要送出呢？可否想过，把新年的祝福藏在雪花里，传递下去。

图中文字：新 图中文字：年 图中文字：快 图中文字：乐

这个创意来源于贴窗花的传统新年习俗，从窗花联想到雪花，又想起之前网上流传的姓氏雪花图片（如下图），图片本身并没有太多的技术含量，只有略懂一点photoshop的人，都应该知道这只需要经过简单的复制图层并做旋转变换便可实现这种效果。可是对于对ps不是很了解的大众来说，这似乎并不是一件容易的事情。我们为什么不可以通过h5的形式，让每一个普通人都能轻松地把自己想要的文字做成雪花效果？

网上流传的姓氏雪花图

小学生都知道雪花有六瓣，既然要做就做得更像一些，通过对图片旋转中心点稍作改变，便实现了只要复制五次也可达到的雪花效果。

在h5的开端，我的想法是给用户展示一下文字雪花的美丽，以激发用户的制作兴趣。于是便想到了字从天空中缓缓飘下，并中途转换成雪花的创意。事实证明这是一个大坑，这又是文字下落又是雪花出现（每片雪花由六个文字组成，需要依次设置其出现动画），动画制作简直要把我逼疯。最重要的是，当我终于完成了动画把h5放在手机上播放，这个动画居然因为太卡而不正常显示，悲伤。

第一页 看出来了吗？最上方的五片雪花是我的简书ID哦

开篇找到了一张雪花的照片作为背景图，在雪花动画播放结束后更换的新背景图，是根据之前图片做模糊处理的效果，以后的页面沿用此动画，以达成简介统一的设计风格。

第二页

用户输入文字后，便进入了颜色选择环节。设计最初的想法是只提供充满年味，符合传统对窗花认知的红色，雪花的白色以及简洁的黑色。但看到了第一页飘下的雪花，我觉得不一定非要做出雪花，也可以是普通的花朵呀，于是又添加了粉色、紫色、橙色等丰富的色彩。

第三页

接下来便是生成雪花，选择背景图案的环节。这一环节共有8页，每一种颜色对应一个界面，不同的界面，根据雪花的颜色，提供的背景图案略有不同，用户可根据喜好选择，同时用户也可以自己上传喜好的图片作为背景。不过由于平台的支持问题，上传的文件如果比较大可能会出现上传时间很长或者是上传失败的情况。

图中的雪花，本为6个空白文本框。用户在上一页选择颜色时，即执行设定文字事件，将之前在输入框中输入的文字，设定为文本框中的文字。

背景选择

当用户选好了背景图，单击确定，即执行打印画布事件，将上图中白色背景及其上方的文本合并为一张图片。因为画布打印需要一定的时间，所以先跳转至加载页面，持续时间为5秒。

加载页面

五秒后，自动跳转下一页，长按图片即可保存。也可以选择再来一张，将跳转至输入框页面重现开始。

最终效果产生

贯穿h5的背景音乐是一曲悠扬的纯音乐，用户可通过右上角的喇叭按钮决定开启或关闭音乐。

---

H5 从设计到制作，陆陆续续花了好几天的时间，作为一个文科生，是真的被这乱七八糟各种事件各种问题搞得晕头转向。其间不明原因地，雪花总是在第一次生成时加载不出来，第一次打印画布也没有任何反应，尝试了各种解决方式都无济于事，最终问了h5平台客服才弄明白，是预加载页面数设置的问题。

没有利益，没有任何目的，花时间做这个，只是因为我喜欢而已，喜欢通过技术方式实现自己的创意。除了背景图案个人无法完成，里面的每个部分都是自己一个人做出来。原本打算在屋子加入一些春节元素，结果做着做着就以一张蓝色背景贯穿始终，除了一个“年味红”颜色和一张窗前小女孩的照片（从着装和外貌来看，那女孩过的应该是圣诞节），再也体现不出春节的气氛。也许是设计师随心吧，本不曾感受到年味的气息，便不想在作品中表现出来。

最后，附上h5链接，原创作品，禁止任何形式的盗用、转载和商用。为了图片缩放功能能够正常使用，请在手机端进行访问。《我藏了一个文字在雪花里》