最近開發了一個移動端的端午活動頁面，做完后就想寫點東西總結一下，感受最深的就是打草稿。
剛開始並沒有打草稿，直接開干，越做到后面就越覺得代碼很亂很雜，非常不舒服，做到哪個頁面寫這個頁面的CSS，沒有大局觀。
在完成頁面后，就思考了一下，覺得打草稿是個好習慣，磨刀不誤砍柴工。
打草稿的步驟如下：
1）margin、padding的大致值記錄
2）字體的配色與尺寸
3）圖片的切割，哪些比較適合單個的切割，哪些比較適合合成起來
4）通用組件的提取，包括按鈕、彈出層、Loading、輸入框、以及表格
5）小工具樣式的搜集，例如居左居右等
6）CSS3動畫實現
7）頁面中的難點分析，功能的主次實現排序
一、總覽
上圖是這個活動的總覽。頁面其實就五張半，通過這幾張圖，可以先打打草稿。
1）margin與padding，說的具體點可以是布局的分析，例如上面的“點擊繼續”、“再玩一次”、“朕知道了”這幾個按鈕的邊距，肯定是左右居中的。
2）大致看了下字體有7種顏色，10種字體大小，如果使用SASS，可以將顏色和字體大小設置為合適的變量，方便引用
3）活動頁面最多的就是圖片了，像“選擇戰隊”和“成績排名”的背景圖就是同一個，可以復用，四個Logo圖標可以組成一張合成圖，我比較喜歡將相同功能的圖片做成合成圖，而不是全部合在一起，不過實際情況實際分析。
4）大概有4種按鈕，可以抽象出一個“btn”樣式，與不同的按鈕組合使用，2種彈出層，Loading、輸入框、以及表格都是1種。
5）大概有4種動畫，漸顯、放大、滑動、上下浮動等。
6）此次活動的難點就是第三屏的游戲實現，有一個倒計時效果，還有飄動的粽子和白雲，按下后會自動飄落。將會用CreateJS來實現。
7）開發順序是先實現頁面樣式和簡單的JS，最后實現游戲效果。
二、圖片
1）切圖
原先切圖就是用PS中的裁剪來做，不過這樣切起來不精確，而且也費事，最近同事推薦了一個PS插件“cutterman”，可以方便的切圖。
只要選中圖層，點一下導出就OK了，還可以將圖層分為一個組后，再導出。
導出后就是一張png、jpg或gif的圖片了。
2）Sprite圖
做Sprite圖也能用這個工具，就是將圖片放在一個圖層或組里，選中生成就行了。
原先在PC端中“background-position”都是用“px”來定位的，但是，現在在移動端由於使用了“flexible.js”插件，就會放大頁面，造成用“px”會不准確。
Sprite圖是根據“background-position”移動位置來顯示背景圖的，后面在網上查了一下，查到了一些資料，網上說可以用百分比來計算，只是百分比計算的話，還需要了解一些概念。
屬性值為百分比時，將以圖片的 中心點 為基准計算其相對位置，而使用px像素值時將以圖片的 左上角 為基准。
With a value pair of '50% 75%', the point 50% across and 75% down the image is to be placed at the point 50% across and 75% down the padding area.
就是說如果“background-position”設置“50% 75%”，那么就以Sprite中的小圖“50% 75%”作為基准，放到Sprite圖的“50% 75%”位置，就是下圖所示：
可以得出公式，也就是計算左上角的坐標：
n%*W - n%*w = -x
n%*H - n%*h = -y
以上面的那張Sprite圖為例，寫成SASS的@minix如下，“$offset_y”是Y軸偏移量，“$height”是小圖的高度，“$total_height”是Sprite圖的高度。
@mixin spriteY($offset_y, $height, $total_height) { background-position: 0 $offset_y /($height - $total_height)*100%; }
注意下背景“background-size”的寬度為“Sprite圖寬度”，高度為“auto”。
三、PrimusUI
PrimusUI是前面一段時間整理的一個微型UI庫，為了提升開發效率，提取公用模塊而制作的。
具體內容可以參考前面一段時間寫的一篇介紹文《小身材大用途，用PrimusUI駕馭你的頁面》。
本次活動頁面主要應用到了normalize（重置）、grid（網格）、rem（rem計算）、typeface（文本）、layout（布局）、loading以及table（表格）。
1）網格
首頁的Logo排列就是用了網格中的Flex布局與平均分配。
2）文本
在文本CSS中，設置了h1-h6的字體，這樣就可以直接使用標簽，而不用p再設置字體。
HTML中的標簽元素也能更豐富，例如排名的頁面。
3）表格
參與人數的排行是用表格做的，這與平時看到的表格樣子略有不同。
考慮到上面一部分與下面一部分都要左右居中對齊，並且居中的中軸也是同一個，上下部分還有一條橫線分割，用表格的tr、td就很容易實現。
但如果用其他標簽實現，就比較費勁。
四、CSS3特效
1）簡單動畫
前面一段時間正好寫過一些動畫特效《用CSS3動畫，讓頁面動起來》，這次再加深一下印象，這次也參考了一下《Animate.css》。
下圖是一個龍舟滑動的動畫，簡單的上下浮動，船槳的擺動，雖然沒有驚艷的視覺沖擊，不過至少能看出這龍舟動了。
@keyframes boat { from { transform: translate3d(0, funcPxToRem(-10px, 75px), 0); } to { transform: translate3d(0, funcPxToRem(10px, 75px), 0); } } @keyframes quant { from { transform: rotate(15deg); } to { transform: rotate(0deg); } }
2）漸變與陰影
設計稿中經常會有些漸變效果，后面咨詢了設計后，要實現漸變，要先吸取上面顏色與下面顏色，再用CSS漸變屬性，簡單而又粗暴，但很有效。
.btn-begin { background: linear-gradient(to bottom,#ec3d1d 50%, #a8270f); box-shadow: 0 8px #761c0b; }
下圖中按鈕的下部分是用陰影來實現的，上面的代碼中已展示。
寫過兩篇文章專門討論了一下這兩個屬性《CSS3中驚艷的gradient》與《CSS3中border-radius、box-shadow與gradient那點事兒》
3）偽對象::after或::before
偽對象可以幫助你少寫兩個標簽，讓HTML代碼更清晰。
下圖中的選擇戰隊就是一個背景，還有張標題圖，相對定位。
當時做的時候就做了兩個標簽，現在想想完全可以用一個標簽搞定。
<div class="corps" id="corps"> <img src="img/blank.gif" data-src="img/corps-select.png" class="corps-title" /> </div>
4）彈出層
當時為了偷懶就在每一屏的頁面上面直接寫了HTML代碼。
其實可以通過JS做個通用的代碼塊，直接引用即可，不必像我現在這樣每個頁面都寫一遍相關代碼。
5）倒計時
倒計時的JS實現起來不難，用setInterval即可，代碼也不多。
只是這個樣式的實現比較麻煩。
下圖中的數字是需要打出來的，但是四個數字的定位是通過position來實現的，手機屏幕不同，就會出現細微的差別。
最終不得已，對於特定的屏幕范圍使用了CSS媒體查詢。
@media only screen and(max-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and(max-width: 640px) and (min-device-pixel-ratio: 2){ #third{ .countdown { span { &:nth-child(1) { left: 147px; } &:nth-child(2) { left: 215px; } &:nth-child(3) { right: 211px; } &:nth-child(4) { right: 143px; } } } } }
五、CreateJS
CreateJS封裝了Canvas，使得你更容易操縱Canvas，包括四個部分EaselJS（畫布）、TweenJS（動畫）、SoundJS（音頻）、PreloadJS（資源加載）。
有一本書專門介紹了一下這個庫《HTML5.Games.with.CreateJS》，沒有中文版。
前面一段時間曾經做過兩篇簡單記錄《CreateJS基礎類（一）》和《CreateJS事件（二）》，但在實際應用中，還是有點夠嗆。
游戲的操作很簡單，就是點擊粽子就飄落，飄落到船上就加2分，游戲的內容可以查看下面的GIF圖。
流程可以參看下面的流程圖：
1）畫布的縮小
移動端畫布中的元素還是按“px”來的話，在Android端會被放的很大。
粽子變成了巨棕，雲也變成了巨雲，顯然很不符合美感，需要做點調整。Stage對象中有個scaleX和scaleY屬性。
stage.scaleX = stage.scaleY = 0.5;
2）加載資源
如果不用 PreloadJS 中的方法加載資源，后面初始化Bitmap，就是獲取不到圖片尺寸信息。
游戲的主體代碼放到了game.js中。
Loading.queue = new createjs.LoadQueue(); Loading.queue.setMaxConnections(20); res.img && Loading.queue.loadManifest(res.img, !1); Loading.queue.load();
3）粽子與雲朵
每400毫秒出現一只粽子或雲朵，通過setInterval實現。
粽子和雲朵的直線飄動用TweenJS實現。
createjs.Tween.get(gift).to({ x: -750 }, 5000).call(function() { gift.parent.removeChild(gift); });
給粽子綁定“mousedown”事件，如果用“click”，在移動端會出現300ms延遲。
“mousedown”在PC端是鼠標左鍵點擊的意思，在CreateJS中如果設置了“createjs.Touch.enable(stage, true);”，那么“mousedown”就相當於手指的點擊了。
gift.addEventListener('mousedown', function() {
});
粽子的飄落也是用TweenJS來實現，里面還有些計算方式，為何如此計算也不是非常清楚，參照一個demo的，囧。
createjs.Tween.get(gift).to({ y: 550 - gift.y }, 800 * ((550 - gift.y) / 550)).to({ y: 700 - gift.y, alpha: 0 }, 300).call(function() { if (gift.x > 15) { } })
demo源碼下載：
https://github.com/pwstrick/dragon
參考資料：