最近一直有個(gè)小期許，就是要把一年中的節(jié)日都給統(tǒng)統(tǒng)做上一遍h5，正好趕上三八節(jié)，小伙伴們湊在一塊兒一商量，就決定做這個(gè)了。找個(gè)沒(méi)有霧霾天兒的下午，幾個(gè)人湊在一起，拿小黑筆往白版上那么一畫，各自絮叨絮叨自己的方案，再選個(gè)最優(yōu)解，整個(gè)策劃就這樣完成啦~ 當(dāng)然整個(gè)過(guò)程并沒(méi)有說(shuō)的那么輕松但也還算是順利~~

其實(shí)三八節(jié)的案例，還是挺忌諱走根正苗紅的歌頌婦女風(fēng)的，原因很簡(jiǎn)單，千篇一律沒(méi)意思嘛。說(shuō)實(shí)話，作為一位正經(jīng)八百的girl，與其對(duì)我頌公頌德不如直接夸我好看??！所以這個(gè)風(fēng)格pass。

既然不走感情牌，那就試試逗比賤。說(shuō)實(shí)話，一想到三八婦女節(jié)，就能讓我想起初高中的時(shí)候，每到三月八日都有一群賤兮兮的男生假模假樣的祝你三八婦女節(jié)快樂(lè)，還尤其著重“婦女”二字，常常是搞得青春期的小女生氣個(gè)半死。幸虧那時(shí)候后還沒(méi)有真的滿十八歲，多少還有回嘴的說(shuō)頭。但不管怎樣，就算是滿了18歲，也沒(méi)有哪個(gè)女生愿意被人稱作為婦女吧？

 

所以我們覺(jué)得，很有必要向廣大男同胞進(jìn)行一下“三八節(jié)の正確問(wèn)候方式”的科普。所以我們招募了在家忙碌的奶奶，在外認(rèn)真工作的女老板，在學(xué)校勤奮學(xué)習(xí)的女同學(xué)，和軟軟萌萌的女朋友來(lái)?yè)?dān)任教官，確保男同胞的科普效果。以下是我們教官的名片~

 

因?yàn)樾枰覀兊慕坦?，能夠生?dòng)的動(dòng)畫教學(xué)，所以設(shè)計(jì)起來(lái)還是蠻費(fèi)力的。有一款軟件叫paper，我們的設(shè)計(jì)就在這個(gè)軟件上讓教官一點(diǎn)點(diǎn)成型。

啊，當(dāng)然....上圖中的那幾筆爛字是我后加的哈哈~

然后在用photoshop制作成稿，最后就由前端人員來(lái)負(fù)責(zé)啦~

前端拿到稿第一步就是先切圖，話說(shuō)這次的稿可沒(méi)那么好切的說(shuō)，花費(fèi)的時(shí)間比平時(shí)多了一半兒，不過(guò)最后倒也順順利利的做完啦。

有好多圖其實(shí)可以分開(kāi)切的，但由于時(shí)間緊張，就都切到一起了，最終導(dǎo)致整個(gè)h5的大小直逼6M，真心不小，實(shí)在是罪過(guò)。

 

沒(méi)有引用游戲引擎，動(dòng)畫效果是用js切換的圖片，每200ms或300ms更換一組圖片，這樣就有動(dòng)畫的感覺(jué)了，實(shí)現(xiàn)起來(lái)還是挺容易的，難度不大。還有一些動(dòng)畫效果是拿css3實(shí)現(xiàn)的，這個(gè)嘛，就更容易了。

 

背景音樂(lè)找的是Softly, As in a Morning Sunrise，大學(xué)看記錄片的時(shí)候聽(tīng)來(lái)的，整首歌比較輕松詼諧，拿來(lái)當(dāng)背景音樂(lè)正好。就是整首歌文件略大，被我裁了不少，有些可惜呢~打斗的聲音也是從網(wǎng)上找的音效，就是時(shí)間有限，只找了1種配音，所以無(wú)論是雞毛撣子抽打還是巴掌拍亦或是鞭子打都是一種效果，這個(gè)也算是一點(diǎn)小瑕疵吧~

 

有了背景音和效果音，整個(gè)h5一下子就豐滿了不少，尤其是雞毛撣子那位，抽打的效果可贊了呢~

總而言之，上線后的效果還是不錯(cuò)的，就是剛上線的時(shí)候，并發(fā)有點(diǎn)兒大，加載速度很慢，不過(guò)后來(lái)升級(jí)了帶寬后這個(gè)問(wèn)題也就輕松解決啦~

來(lái)，讓咱們上個(gè)截圖：

奶奶雞毛撣子教育版:

女老板抽鞭子教育版：

女朋友甩巴掌教育版：

女同學(xué)鉛筆攻擊教育版：

其實(shí)三八節(jié)怎么過(guò)好呢，我也不知道，如果過(guò)的話，就被扣上了“婦女”的帽子，但要不過(guò)的話，豈不是少了個(gè)向男（老）友（公）和各種機(jī)構(gòu)討要福利的機(jī)會(huì)了...不過(guò)要是過(guò)的話，又不甘心，所以每年這個(gè)時(shí)候女生們都超尷尬的。。。所以你看，如果三月八日過(guò)的是少女節(jié)多好！這樣就沒(méi)有那么多事兒了~

以上！

本次嘮叨結(jié)束

粘上本案例二維碼，手機(jī)掃描瀏覽謝謝！