又到了一年一度的新春佳節(jié)巍杈，是不是有滿滿的祝福想要送出呢坪稽？可否想過曼玩，把新年的祝福藏在雪花里，傳遞下去窒百。

圖中文字：新

圖中文字：年

圖中文字：快

圖中文字：樂

這個(gè)創(chuàng)意來源于貼窗花的傳統(tǒng)新年習(xí)俗黍判，從窗花聯(lián)想到雪花，又想起之前網(wǎng)上流傳的姓氏雪花圖片（如下圖）篙梢，圖片本身并沒有太多的技術(shù)含量顷帖，只有略懂一點(diǎn)photoshop的人，都應(yīng)該知道這只需要經(jīng)過簡單的復(fù)制圖層并做旋轉(zhuǎn)變換便可實(shí)現(xiàn)這種效果渤滞”岫眨可是對(duì)于對(duì)ps不是很了解的大眾來說，這似乎并不是一件容易的事情妄呕。我們?yōu)槭裁床豢梢酝ㄟ^h5的形式陶舞，讓每一個(gè)普通人都能輕松地把自己想要的文字做成雪花效果？

網(wǎng)上流傳的姓氏雪花圖

小學(xué)生都知道雪花有六瓣绪励，既然要做就做得更像一些肿孵，通過對(duì)圖片旋轉(zhuǎn)中心點(diǎn)稍作改變，便實(shí)現(xiàn)了只要復(fù)制五次也可達(dá)到的雪花效果疏魏。

在h5的開端停做，我的想法是給用戶展示一下文字雪花的美麗，以激發(fā)用戶的制作興趣蠢护。于是便想到了字從天空中緩緩飄下雅宾，并中途轉(zhuǎn)換成雪花的創(chuàng)意。事實(shí)證明這是一個(gè)大坑，這又是文字下落又是雪花出現(xiàn)（每片雪花由六個(gè)文字組成眉抬，需要依次設(shè)置其出現(xiàn)動(dòng)畫）贯吓，動(dòng)畫制作簡直要把我逼瘋。最重要的是蜀变，當(dāng)我終于完成了動(dòng)畫把h5放在手機(jī)上播放悄谐，這個(gè)動(dòng)畫居然因?yàn)樘ǘ徽ｏ@示，悲傷库北。

第一頁

看出來了嗎爬舰？最上方的五片雪花是我的簡書ID哦

開篇找到了一張雪花的照片作為背景圖，在雪花動(dòng)畫播放結(jié)束后更換的新背景圖寒瓦，是根據(jù)之前圖片做模糊處理的效果情屹，以后的頁面沿用此動(dòng)畫，以達(dá)成簡介統(tǒng)一的設(shè)計(jì)風(fēng)格杂腰。

第二頁

用戶輸入文字后垃你，便進(jìn)入了顏色選擇環(huán)節(jié)。設(shè)計(jì)最初的想法是只提供充滿年味喂很，符合傳統(tǒng)對(duì)窗花認(rèn)知的紅色惜颇，雪花的白色以及簡潔的黑色。但看到了第一頁飄下的雪花少辣，我覺得不一定非要做出雪花凌摄，也可以是普通的花朵呀，于是又添加了粉色漓帅、紫色锨亏、橙色等豐富的色彩。

第三頁

接下來便是生成雪花煎殷，選擇背景圖案的環(huán)節(jié)屯伞。這一環(huán)節(jié)共有8頁，每一種顏色對(duì)應(yīng)一個(gè)界面豪直，不同的界面，根據(jù)雪花的顏色珠移，提供的背景圖案略有不同弓乙，用戶可根據(jù)喜好選擇，同時(shí)用戶也可以自己上傳喜好的圖片作為背景钧惧。不過由于平臺(tái)的支持問題暇韧，上傳的文件如果比較大可能會(huì)出現(xiàn)上傳時(shí)間很長或者是上傳失敗的情況。

圖中的雪花浓瞪，本為6個(gè)空白文本框懈玻。用戶在上一頁選擇顏色時(shí)，即執(zhí)行設(shè)定文字事件乾颁，將之前在輸入框中輸入的文字涂乌，設(shè)定為文本框中的文字艺栈。

背景選擇

當(dāng)用戶選好了背景圖，單擊確定湾盒，即執(zhí)行打印畫布事件湿右，將上圖中白色背景及其上方的文本合并為一張圖片。因?yàn)楫嫴即蛴⌒枰欢ǖ臅r(shí)間罚勾，所以先跳轉(zhuǎn)至加載頁面毅人，持續(xù)時(shí)間為5秒。

加載頁面

五秒后尖殃，自動(dòng)跳轉(zhuǎn)下一頁丈莺，長按圖片即可保存。也可以選擇再來一張送丰，將跳轉(zhuǎn)至輸入框頁面重現(xiàn)開始场刑。

最終效果產(chǎn)生

貫穿h5的背景音樂是一曲悠揚(yáng)的純音樂，用戶可通過右上角的喇叭按鈕決定開啟或關(guān)閉音樂蚪战。

H5 從設(shè)計(jì)到制作牵现，陸陸續(xù)續(xù)花了好幾天的時(shí)間，作為一個(gè)文科生邀桑，是真的被這亂七八糟各種事件各種問題搞得暈頭轉(zhuǎn)向瞎疼。其間不明原因地，雪花總是在第一次生成時(shí)加載不出來壁畸，第一次打印畫布也沒有任何反應(yīng)贼急，嘗試了各種解決方式都無濟(jì)于事，最終問了h5平臺(tái)客服才弄明白捏萍，是預(yù)加載頁面數(shù)設(shè)置的問題太抓。

沒有利益，沒有任何目的令杈，花時(shí)間做這個(gè)走敌，只是因?yàn)槲蚁矚g而已，喜歡通過技術(shù)方式實(shí)現(xiàn)自己的創(chuàng)意逗噩。除了背景圖案個(gè)人無法完成掉丽，里面的每個(gè)部分都是自己一個(gè)人做出來。原本打算在屋子加入一些春節(jié)元素异雁，結(jié)果做著做著就以一張藍(lán)色背景貫穿始終捶障，除了一個(gè)“年味紅”顏色和一張窗前小女孩的照片（從著裝和外貌來看，那女孩過的應(yīng)該是圣誕節(jié)）纲刀，再也體現(xiàn)不出春節(jié)的氣氛项炼。也許是設(shè)計(jì)師隨心吧，本不曾感受到年味的氣息，便不想在作品中表現(xiàn)出來锭部。

最后暂论，附上h5鏈接，原創(chuàng)作品空免，禁止任何形式的盜用空另、轉(zhuǎn)載和商用。為了圖片縮放功能能夠正常使用蹋砚，請?jiān)谑謾C(jī)端進(jìn)行訪問扼菠。《我藏了一個(gè)文字在雪花里》