|
最近開(kāi)發(fā)了一個(gè)移動(dòng)端的端午活動(dòng)頁(yè)面，做完后就想寫(xiě)點(diǎn)東西總結(jié)一下，感受最深的就是打草稿。 剛開(kāi)始并沒(méi)有打草稿，直接開(kāi)干，越做到后面就越覺(jué)得代碼很亂很雜，非常不舒服，做到哪個(gè)頁(yè)面寫(xiě)這個(gè)頁(yè)面的CSS，沒(méi)有大局觀(guān)。 在完成頁(yè)面后，就思考了一下，覺(jué)得打草稿是個(gè)好習(xí)慣，磨刀不誤砍柴工。 打草稿的步驟如下： 1）margin、padding的大致值記錄 2）字體的配色與尺寸 3）圖片的切割，哪些比較適合單個(gè)的切割，哪些比較適合合成起來(lái) 4）通用組件的提取，包括按鈕、彈出層、Loading、輸入框、以及表格 5）小工具樣式的搜集，例如居左居右等 6）CSS3動(dòng)畫(huà)實(shí)現(xiàn) 7）頁(yè)面中的難點(diǎn)分析，功能的主次實(shí)現(xiàn)排序 一、總覽上圖是這個(gè)活動(dòng)的總覽。頁(yè)面其實(shí)就五張半，通過(guò)這幾張圖，可以先打打草稿。 1）margin與padding，說(shuō)的具體點(diǎn)可以是布局的分析，例如上面的“點(diǎn)擊繼續(xù)”、“再玩一次”、“朕知道了”這幾個(gè)按鈕的邊距，肯定是左右居中的。 2）大致看了下字體有7種顏色，10種字體大小，如果使用SASS，可以將顏色和字體大小設(shè)置為合適的變量，方便引用 3）活動(dòng)頁(yè)面最多的就是圖片了，像“選擇戰(zhàn)隊(duì)”和“成績(jī)排名”的背景圖就是同一個(gè)，可以復(fù)用，四個(gè)Logo圖標(biāo)可以組成一張合成圖，我比較喜歡將相同功能的圖片做成合成圖，而不是全部合在一起，不過(guò)實(shí)際情況實(shí)際分析。 4）大概有4種按鈕，可以抽象出一個(gè)“btn”樣式，與不同的按鈕組合使用，2種彈出層，Loading、輸入框、以及表格都是1種。 5）大概有4種動(dòng)畫(huà)，漸顯、放大、滑動(dòng)、上下浮動(dòng)等。 6）此次活動(dòng)的難點(diǎn)就是第三屏的游戲?qū)崿F(xiàn)，有一個(gè)倒計(jì)時(shí)效果，還有飄動(dòng)的粽子和白云，按下后會(huì)自動(dòng)飄落。將會(huì)用CreateJS來(lái)實(shí)現(xiàn)。 7）開(kāi)發(fā)順序是先實(shí)現(xiàn)頁(yè)面樣式和簡(jiǎn)單的JS，最后實(shí)現(xiàn)游戲效果。
二、圖片1）切圖 原先切圖就是用PS中的裁剪來(lái)做，不過(guò)這樣切起來(lái)不精確，而且也費(fèi)事，最近同事推薦了一個(gè)PS插件“cutterman”，可以方便的切圖。 只要選中圖層，點(diǎn)一下導(dǎo)出就OK了，還可以將圖層分為一個(gè)組后，再導(dǎo)出。 導(dǎo)出后就是一張png、jpg或gif的圖片了。
2）Sprite圖 做Sprite圖也能用這個(gè)工具，就是將圖片放在一個(gè)圖層或組里，選中生成就行了。 原先在PC端中“background-position”都是用“px”來(lái)定位的，但是，現(xiàn)在在移動(dòng)端由于使用了“flexible.js”插件，就會(huì)放大頁(yè)面，造成用“px”會(huì)不準(zhǔn)確。 Sprite圖是根據(jù)“background-position”移動(dòng)位置來(lái)顯示背景圖的，后面在網(wǎng)上查了一下，查到了一些資料，網(wǎng)上說(shuō)可以用百分比來(lái)計(jì)算，只是百分比計(jì)算的話(huà)，還需要了解一些概念。 屬性值為百分比時(shí)，將以圖片的 中心點(diǎn) 為基準(zhǔn)計(jì)算其相對(duì)位置，而使用px像素值時(shí)將以圖片的 左上角 為基準(zhǔn)。 W3C介紹background-position上面寫(xiě)著： 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. 就是說(shuō)如果“background-position”設(shè)置“50% 75%”，那么就以Sprite中的小圖“50% 75%”作為基準(zhǔn)，放到Sprite圖的“50% 75%”位置，就是下圖所示： 可以得出公式，也就是計(jì)算左上角的坐標(biāo)： n%*W - n%*w = -xn%*H - n%*h = -y 以上面的那張Sprite圖為例，寫(xiě)成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”。 三、PrimusUIPrimusUI是前面一段時(shí)間整理的一個(gè)微型UI庫(kù)，為了提升開(kāi)發(fā)效率，提取公用模塊而制作的。 具體內(nèi)容可以參考前面一段時(shí)間寫(xiě)的一篇介紹文《小身材大用途，用PrimusUI駕馭你的頁(yè)面》。 本次活動(dòng)頁(yè)面主要應(yīng)用到了normalize（重置）、grid（網(wǎng)格）、rem（rem計(jì)算）、typeface（文本）、layout（布局）、loading以及table（表格）。 1）網(wǎng)格 首頁(yè)的Logo排列就是用了網(wǎng)格中的Flex布局與平均分配。
2）文本 在文本CSS中，設(shè)置了h1-h6的字體，這樣就可以直接使用標(biāo)簽，而不用p再設(shè)置字體。 HTML中的標(biāo)簽元素也能更豐富，例如排名的頁(yè)面。
3）表格 參與人數(shù)的排行是用表格做的，這與平時(shí)看到的表格樣子略有不同。 考慮到上面一部分與下面一部分都要左右居中對(duì)齊，并且居中的中軸也是同一個(gè)，上下部分還有一條橫線(xiàn)分割，用表格的tr、td就很容易實(shí)現(xiàn)。 但如果用其他標(biāo)簽實(shí)現(xiàn)，就比較費(fèi)勁。
四、CSS3特效1）簡(jiǎn)單動(dòng)畫(huà) 前面一段時(shí)間正好寫(xiě)過(guò)一些動(dòng)畫(huà)特效《用CSS3動(dòng)畫(huà)，讓頁(yè)面動(dòng)起來(lái)》，這次再加深一下印象，這次也參考了一下《Animate.css》。 下圖是一個(gè)龍舟滑動(dòng)的動(dòng)畫(huà)，簡(jiǎn)單的上下浮動(dòng)，船槳的擺動(dòng)，雖然沒(méi)有驚艷的視覺(jué)沖擊，不過(guò)至少能看出這龍舟動(dòng)了。 @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）漸變與陰影 設(shè)計(jì)稿中經(jīng)常會(huì)有些漸變效果，后面咨詢(xún)了設(shè)計(jì)后，要實(shí)現(xiàn)漸變，要先吸取上面顏色與下面顏色，再用CSS漸變屬性，簡(jiǎn)單而又粗暴，但很有效。 .btn-begin { background: linear-gradient(to bottom,#ec3d1d 50%, #a8270f); box-shadow: 0 8px #761c0b;} 下圖中按鈕的下部分是用陰影來(lái)實(shí)現(xiàn)的，上面的代碼中已展示。 寫(xiě)過(guò)兩篇文章專(zhuān)門(mén)討論了一下這兩個(gè)屬性《CSS3中驚艷的gradient》與《CSS3中border-radius、box-shadow與gradient那點(diǎn)事兒》 3）偽對(duì)象::after或::before 偽對(duì)象可以幫助你少寫(xiě)兩個(gè)標(biāo)簽，讓HTML代碼更清晰。 下圖中的選擇戰(zhàn)隊(duì)就是一個(gè)背景，還有張標(biāo)題圖，相對(duì)定位。 當(dāng)時(shí)做的時(shí)候就做了兩個(gè)標(biāo)簽，現(xiàn)在想想完全可以用一個(gè)標(biāo)簽搞定。
div class='corps' id='corps'> img src='img/blank.gif' data-src='img/corps-select.png' class='corps-title' />div> 4）彈出層 當(dāng)時(shí)為了偷懶就在每一屏的頁(yè)面上面直接寫(xiě)了HTML代碼。 其實(shí)可以通過(guò)JS做個(gè)通用的代碼塊，直接引用即可，不必像我現(xiàn)在這樣每個(gè)頁(yè)面都寫(xiě)一遍相關(guān)代碼。
5）倒計(jì)時(shí) 倒計(jì)時(shí)的JS實(shí)現(xiàn)起來(lái)不難，用setInterval即可，代碼也不多。 只是這個(gè)樣式的實(shí)現(xiàn)比較麻煩。 下圖中的數(shù)字是需要打出來(lái)的，但是四個(gè)數(shù)字的定位是通過(guò)position來(lái)實(shí)現(xiàn)的，手機(jī)屏幕不同，就會(huì)出現(xiàn)細(xì)微的差別。
最終不得已，對(duì)于特定的屏幕范圍使用了CSS媒體查詢(xún)。 @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; } } } }} 五、CreateJSCreateJS封裝了Canvas，使得你更容易操縱Canvas，包括四個(gè)部分EaselJS（畫(huà)布）、TweenJS（動(dòng)畫(huà)）、SoundJS（音頻）、PreloadJS（資源加載）。 有一本書(shū)專(zhuān)門(mén)介紹了一下這個(gè)庫(kù)《HTML5.Games.with.CreateJS》，沒(méi)有中文版。 前面一段時(shí)間曾經(jīng)做過(guò)兩篇簡(jiǎn)單記錄《CreateJS基礎(chǔ)類(lèi)（一）》和《CreateJS事件（二）》，但在實(shí)際應(yīng)用中，還是有點(diǎn)夠嗆。 游戲的操作很簡(jiǎn)單，就是點(diǎn)擊粽子就飄落，飄落到船上就加2分，游戲的內(nèi)容可以查看下面的GIF圖。
1）畫(huà)布的縮小 移動(dòng)端畫(huà)布中的元素還是按“px”來(lái)的話(huà)，在A(yíng)ndroid端會(huì)被放的很大。 粽子變成了巨棕，云也變成了巨云，顯然很不符合美感，需要做點(diǎn)調(diào)整。Stage對(duì)象中有個(gè)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毫秒出現(xiàn)一只粽子或云朵，通過(guò)setInterval實(shí)現(xiàn)。 粽子和云朵的直線(xiàn)飄動(dòng)用TweenJS實(shí)現(xiàn)。 createjs.Tween.get(gift).to({ x: -750}, 5000).call(function() { gift.parent.removeChild(gift);}); 給粽子綁定“mousedown”事件，如果用“click”，在移動(dòng)端會(huì)出現(xiàn)300ms延遲。 “mousedown”在PC端是鼠標(biāo)左鍵點(diǎn)擊的意思，在CreateJS中如果設(shè)置了“createjs.Touch.enable(stage, true);”，那么“mousedown”就相當(dāng)于手指的點(diǎn)擊了。 gift.addEventListener('mousedown', function() {}); 粽子的飄落也是用TweenJS來(lái)實(shí)現(xiàn)，里面還有些計(jì)算方式，為何如此計(jì)算也不是非常清楚，參照一個(gè)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
參考資料： 解決 CSS Sprites 使用 rem 單位時(shí)在移動(dòng)端下錯(cuò)位的問(wèn)題 閑扯 background-position 的單位屬性值 作者：咖啡機(jī)(K.F.J) |
|
|
