HenCoder「仿写酷界面」征稿
HenCoder 的自定義 View 部分第一季——繪制——的技術(shù)講解部分已經(jīng)結(jié)束。在下一季——布局——開(kāi)始之前，繪制部分還有最后一個(gè)環(huán)節(jié)，那就是在上個(gè)月我提到過(guò)的：「仿寫(xiě)酷界面」活動(dòng)。
這次活動(dòng)的目的很簡(jiǎn)單：
很多人跟著 HenCoder 學(xué)了三個(gè)月了，只覺(jué)得學(xué)了一身好功夫，卻無(wú)從施展和印證。其實(shí)你學(xué)到的這些東西慢慢都會(huì)體現(xiàn)出它們的價(jià)值的，不過(guò)如果你比較心急，沒(méi)關(guān)系，今天的仿寫(xiě)就是給你們準(zhǔn)備的，你做完了今天的這幾個(gè)仿寫(xiě)就會(huì)驚喜地發(fā)現(xiàn)「原來(lái)自己已經(jīng)真的這么牛逼了」。
除了讓你們自我證明，我也想為自己證明一下。證明什么呢？
在現(xiàn)在這個(gè)連 github 都會(huì)有人刷 stars 的急功近利的時(shí)代，我相信很多人在第一眼看到 HenCoder 的時(shí)候，也會(huì)習(xí)慣性地以為它只不過(guò)是一個(gè)吹噓大于干貨的沒(méi)價(jià)值的博客 / 專(zhuān)欄 / 公眾號(hào)。那么通過(guò)這次的活動(dòng)我就要讓人們看到，HenCoder 的讀者們?cè)跇I(yè)余時(shí)間里跟著我學(xué)習(xí)了短短三個(gè)月后，就能在毫無(wú)指導(dǎo)的情況下做出這么炫酷的效果。我要在活動(dòng)結(jié)束后讓大家看到，在很多人都忙于刷自己的社交聲望、刷點(diǎn)贊數(shù)的時(shí)候，依然是有人在認(rèn)真做干貨，并且真的做出來(lái)了！
為下一季——布局部分留出預(yù)創(chuàng)作的時(shí)間，讓你們繼續(xù)誤以為我真的是那么高產(chǎn)，用一周時(shí)間就能寫(xiě)出一篇那么復(fù)雜的文章 + 連錄帶后期做出一個(gè)視頻[乖巧]（也許這才是這次活動(dòng)真正的目的？）。
活動(dòng)簡(jiǎn)介
這次活動(dòng)分為三部分：
仿寫(xiě)——讀者來(lái)完成（就是你們啦）
我選取了幾個(gè)比較經(jīng)典的 App 的界面繪制部分，由 HenCoder 的讀者自愿進(jìn)行仿寫(xiě)。仿寫(xiě)完成后，把你的項(xiàng)目上傳到 github，通過(guò)公眾號(hào)的對(duì)話(huà)界面發(fā)送給我；
選稿——公眾號(hào)來(lái)完成（就是我啦）
我會(huì)在投來(lái)的稿件中，每個(gè)仿寫(xiě)內(nèi)容中都選取一個(gè)最具代表性的稿件，作為樣例，把仿寫(xiě)效果圖、仿寫(xiě)代碼以及仿寫(xiě)者分享出來(lái)，讓大家看到你做的成果，也看到你；
點(diǎn)評(píng)——原開(kāi)發(fā)者來(lái)完成
最后，我要請(qǐng)來(lái)這些仿寫(xiě)內(nèi)容的原開(kāi)發(fā)團(tuán)隊(duì)中的成員，請(qǐng)他們對(duì)這些選出的優(yōu)秀稿件進(jìn)行點(diǎn)評(píng)。你有能力仿寫(xiě)，也更要有膽量讓原作者來(lái)審閱。千萬(wàn)別怕，讓原作者審閱你的仿寫(xiě)代碼，這可是個(gè)得到提升好機(jī)會(huì)哦。
仿寫(xiě)內(nèi)容
從之前投來(lái)的茫茫多的樣例中，我最終選定了四個(gè)用來(lái)仿寫(xiě)的內(nèi)容（由于我忘了保留消息，大家之前的提交留言已經(jīng)被自動(dòng)刪除，現(xiàn)在已經(jīng)沒(méi)法從后臺(tái)對(duì)各位提交者進(jìn)行回復(fù)了，所以在這里給各位選中和沒(méi)選中的提交者比心，感謝你們）：
即刻的點(diǎn)贊效果：
這一個(gè)看似簡(jiǎn)單的效果，其實(shí)并不簡(jiǎn)單。例如，右邊的數(shù)是一個(gè)字符一個(gè)字符地跳動(dòng)的，而不是整個(gè)數(shù)一起在跳動(dòng)中被新的數(shù)替換掉，這個(gè)還是有點(diǎn)難度的。不過(guò)這個(gè)效果需要用到的技術(shù)點(diǎn)，在 HenCoder 的系列文章中都能找到答案。
薄荷健康的滑動(dòng)卷尺效果：
這個(gè)是薄荷健康的體重設(shè)定界面，通過(guò)橫向滑動(dòng)的方式來(lái)設(shè)置體重。做得可以說(shuō)非常精細(xì)了。
注：滑動(dòng)操作如果不會(huì)做的話(huà)，可以把滑動(dòng)做成自動(dòng)的（例如點(diǎn)擊按鈕后卷尺開(kāi)始自動(dòng)橫向滑動(dòng)，然后逐漸停止），因?yàn)檫@部分屬于觸摸反饋的內(nèi)容，我還沒(méi)有講過(guò)。
小米運(yùn)動(dòng)首頁(yè)頂部的運(yùn)動(dòng)記錄界面：
說(shuō)明：前半段的類(lèi)似煙花的轉(zhuǎn)圈圈效果是連接外部設(shè)備的過(guò)程，后半段是連接成功后的運(yùn)動(dòng)狀態(tài)顯示。具體的效果細(xì)節(jié)從動(dòng)圖中都能看出來(lái)。
注：背景選擇純色就好，不必和小米運(yùn)動(dòng)的藍(lán)色遠(yuǎn)山背景一致。
Flipboard 紅板報(bào)的翻頁(yè)效果（加強(qiáng)版）：
Flipboard 是我上一家就職的公司，它最聞名于世的就是它的翻頁(yè)式交互。這次的仿寫(xiě)效果我再加點(diǎn)難度：除了翻頁(yè)效果，再加上 270° 旋轉(zhuǎn)。
看過(guò)往期 HenCoder 分享的應(yīng)該已經(jīng)發(fā)現(xiàn)了，這個(gè)效果曾經(jīng)出現(xiàn)過(guò)，但我并沒(méi)有講過(guò)它的實(shí)現(xiàn)（雖然很多人都問(wèn)過(guò)）。實(shí)際上如果你把每一期的內(nèi)容都看懂并且做過(guò)練習(xí)題，這個(gè)動(dòng)畫(huà)做起來(lái)是不太難的。
如果你要參與這次仿寫(xiě)活動(dòng)，這四個(gè)效果可以任選一個(gè)，把它寫(xiě)出來(lái)，然后把項(xiàng)目上傳到 GitHub，并把項(xiàng)目地址通過(guò)微信公眾號(hào)（HenCoder）的對(duì)話(huà)界面提交給我就好。（提交截止時(shí)間：10 月 19 日 23:59）
然后，我會(huì)從中個(gè)選出一個(gè)最有代表性的，交給被仿寫(xiě)應(yīng)用的原開(kāi)發(fā)者，讓他們來(lái)點(diǎn)評(píng)，點(diǎn)評(píng)的結(jié)果我會(huì)一起公布出來(lái)。
獎(jiǎng)品
這次活動(dòng)由 insight.io 提供贊助。關(guān)于贊助方我稍后再說(shuō)，知道你們最關(guān)心獎(jiǎng)品：
一等獎(jiǎng) 1 名，由群眾投票，從四位被選中的仿寫(xiě)者中選出「最優(yōu)秀」的一位。獎(jiǎng)品是 Google Clips 相機(jī)：
Google 剛發(fā)布的新產(chǎn)品，非常酷。本來(lái)我也想買(mǎi)一個(gè)，但看到它的價(jià)格我就默默把頁(yè)面關(guān)閉了。
二等獎(jiǎng) 3 名，也就是另外三位仿寫(xiě)者啦。獎(jiǎng)品是 Google Chrome 抱枕：
左邊的那個(gè)就是。
另外，對(duì)于四位幫忙點(diǎn)評(píng)的原開(kāi)發(fā)者，每人也會(huì)得到一個(gè) Chrome 的抱枕。
關(guān)于 insight.io
也就是為本次活動(dòng)的信仰充值提供支持的贊助方爸爸：
可能有些人沒(méi)聽(tīng)過(guò) insight.io ，這是一個(gè)提供瀏覽器端代碼閱讀和代碼搜索的服務(wù)平臺(tái)，為在線閱讀代碼提供了很大的方便。現(xiàn)在越來(lái)越多的人都有了在線閱讀代碼的需求，例如查看開(kāi)源庫(kù)的代碼，或者在線審閱同事提交的 Pull Requests。insight.io 可以讓那些在頁(yè)面中躺著的靜態(tài)的代碼變成動(dòng)態(tài)的、自動(dòng)提示的、可跳轉(zhuǎn)的，很好地優(yōu)化了閱讀體驗(yàn)。
不懂？
不懂就算了，這次活動(dòng)后面的某些環(huán)節(jié)會(huì)依賴(lài)到 insight.io 的服務(wù)，到時(shí)候你就明白了。
當(dāng)然，有興趣優(yōu)化自己以及團(tuán)隊(duì)的代碼閱讀體驗(yàn)的人，可以現(xiàn)在就去他們的官網(wǎng)看看：?https://insight.io?。
總結(jié)
最后再總結(jié)一次活動(dòng)的內(nèi)容：
上面描述的即刻點(diǎn)贊效果、薄荷健康滑動(dòng)卷尺、小米運(yùn)動(dòng)記錄界面、Flipboard 翻頁(yè)效果（加強(qiáng)版）這四個(gè)中，任選一個(gè)仿寫(xiě)；
仿寫(xiě)完成后，把代碼上傳到 GitHub，然后通過(guò) HenCoder 微信公眾號(hào)的菜單來(lái)提交項(xiàng)目地址；
每個(gè)效果都會(huì)選出一個(gè)代表來(lái)讓原開(kāi)發(fā)者進(jìn)行點(diǎn)評(píng)；
選出的四個(gè)代表會(huì)選出一個(gè)最佳，它的仿寫(xiě)者將獲得 Google Clips 相機(jī)一部，另外三位仿寫(xiě)者將獲得 Google Chrome 抱枕一個(gè)。
我要利用這次活動(dòng)來(lái)給自己后面的創(chuàng)作留出預(yù)創(chuàng)作時(shí)間，來(lái)制造一種我有能力做到每周更一篇高質(zhì)量干貨的假象。
就這樣。
總結(jié)
以上是生活随笔為你收集整理的HenCoder「仿写酷界面」征稿的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Minimum supported Gr
- 下一篇： 代码中特殊的注释技术——TODO、FIX