HenCoder「仿寫酷界面」活動——徵稿

HenCoder 的自定義 View 部分第一季——繪製——的技術講解部分已經結束。在下一季——佈局——開始以前，繪製部分還有最後一個環節，那就是在上個月我提到過的：「仿寫酷界面」活動。

此次活動的目的很簡單：

1. 不少人跟着 HenCoder 學了三個月了，只以爲學了一身好功夫，卻無從施展和印證。其實你學到的這些東西慢慢都會體現出它們的價值的，不過若是你比較心急，不要緊，今天的仿寫就是給大家準備的，你作完了今天的這幾個仿寫就會驚喜地發現「原來本身已經真的這麼牛逼了」。

2. 除了讓大家自我證實，我也想爲本身證實一下。證實什麼呢？

   在如今這個連 github 都會有人刷 stars 的急功近利的時代，我相信不少人在第一眼看到 HenCoder 的時候，也會習慣性地覺得它只不過是一個吹噓大於乾貨的沒價值的博客 / 專欄 / 公衆號。那麼經過此次的活動我就要讓人們看到，HenCoder 的讀者們在業餘時間裏跟着我學習了短短三個月後，就能在毫無指導的狀況下作出這麼炫酷的效果。我要在活動結束後讓你們看到，在不少人都忙於刷本身的社交聲望、刷點贊數的時候，依然是有人在認真作乾貨，而且真的作出來了！

3. 爲下一季——佈局部分留出預創做的時間，讓大家繼續誤覺得我真的是那麼高產，用一週時間就能寫出一篇那麼複雜的文章 + 連錄帶後期作出一個視頻（也許這纔是此次活動真正的目的？）。

活動簡介

此次活動分爲三部分：

1. 仿寫——讀者來完成（就是大家啦）
   我選取了幾個比較經典的 App 的界面繪製部分，由 HenCoder 的讀者自願進行仿寫。仿寫完成後，把你的項目上傳到 github，經過公衆號的對話界面發送給我；

2. 選稿——公衆號來完成（就是我啦）
   我會在投來的稿件中，每一個仿寫內容中都選取一個最具表明性的稿件，做爲樣例，把仿寫效果圖、仿寫代碼以及仿寫者分享出來，讓你們看到你作的成果，也看到你；

3. 點評——原開發者來完成
   最後，我要請來這些仿寫內容的原開發團隊中的成員，請他們對這些選出的優秀稿件進行點評。你有能力仿寫，也更要有膽量讓原做者來審閱。千萬別怕，讓原做者審閱你的仿寫代碼，這但是個獲得提高好機會哦。

仿寫內容

從以前投來的茫茫多的樣例中，我最終選定了四個用來仿寫的內容（因爲我忘了保留消息，你們以前的提交留言已經被自動刪除，如今已經無法從後臺對各位提交者進行回覆了，因此在這裏給各位選中和沒選中的提交者比心，感謝大家）：

1. 即刻的點贊效果：

   

   

   
   

   

   這一個看似簡單的效果，其實並不簡單。例如，右邊的數是一個字符一個字符地跳動的，而不是整個數一塊兒在跳動中被新的數替換掉，這個仍是有點難度的。不過這個效果須要用到的技術點，在 HenCoder 的系列文章中都能找到答案。

2. 薄荷健康的滑動捲尺效果：

   

   這個是薄荷健康的體重設定界面，經過橫向滑動的方式來設置體重。作得能夠說很是精細了。

   注：滑動操做若是不會作的話，能夠把滑動作成自動的（例如點擊按鈕後捲尺開始自動橫向滑動，而後逐漸中止），由於這部分屬於觸摸反饋的內容，我尚未講過。

3. 小米運動首頁頂部的運動記錄界面：

   

   說明：前半段的相似煙花的轉圈圈效果是鏈接外部設備的過程，後半段是鏈接成功後的運動狀態顯示。具體的效果細節從動圖中都能看出來。

   注：背景選擇純色就好，沒必要和小米運動的藍色遠山背景一致。

4. Flipboard 紅板報的翻頁效果（增強版）：

   

   

   Flipboard 是我上一家就任的公司，它最聞名於世的就是它的翻頁式交互。此次的仿寫效果我再加點難度：除了翻頁效果，再加上 270° 旋轉。

   看過往期 HenCoder 分享的應該已經發現了，這個效果曾經出現過，但我並無講過它的實現（雖然不少人都問過）。實際上若是你把每一期的內容都看懂而且作過練習題，這個動畫作起來是不太難的。

   若是你要參與此次仿寫活動，這四個效果能夠任選一個，把它寫出來，而後把項目上傳到 GitHub，並點擊文章末尾的投稿連接，把項目地址提交給我就好。（或者你也能夠經過微信公衆號「HenCoder」的對話界面來提交。）（提交截止時間：10 月 19 日 23:59）

   

   而後，我會從中個選出一個最有表明性的，交給被仿寫應用的原開發者，讓他們來點評，點評的結果我會一塊兒公佈出來。

獎品

此次活動由 insight.io 提供贊助。關於贊助方我稍後再說，知道大家最關心獎品：

• 一等獎 1 名，由羣衆投票，從四位被選中的仿寫者中選出「最優秀」的一位。獎品是 Google Clips 相機：

  

  Google 剛發佈的新產品，很是酷。原本我也想買一個，但看到它的價格我就默默把頁面關閉了。

• 二等獎 3 名，也就是另外三位仿寫者啦。獎品是 Google Chrome 抱枕：

  

  左邊的那個就是。

• 另外，對於四位幫忙點評的原開發者，每人也會獲得一個 Chrome 的抱枕。

關於 insight.io

也就是爲本次活動的信仰充值提供支持的贊助方爸爸：

可能有些人沒聽過 insight.io ，這是一個提供瀏覽器端代碼閱讀和代碼搜索的服務平臺，爲在線閱讀代碼提供了很大的方便。如今愈來愈多的人都有了在線閱讀代碼的需求，例如查看開源庫的代碼，或者在線審閱同事提交的 Pull Requests。insight.io 可讓那些在頁面中躺着的靜態的代碼變成動態的、自動提示的、可跳轉的，很好地優化了閱讀體驗。

不懂？

不懂就算了，此次活動後面的某些環節會依賴到 insight.io 的服務，到時候你就明白了。

固然，有興趣優化本身以及團隊的代碼閱讀體驗的人，能夠如今就去他們的官網看看： insight.io 。

總結

最後再總結一次活動的內容：

1. 上面描述的即刻點贊效果、薄荷健康滑動捲尺、小米運動記錄界面、Flipboard 翻頁效果（增強版）這四個中，任選一個仿寫；
2. 仿寫完成後，把代碼上傳到 GitHub，而後經過 HenCoder 微信公衆號的菜單來提交項目地址；
3. 每一個效果都會選出一個表明來讓原開發者進行點評；
4. 選出的四個表明會選出一個最佳，它的仿寫者將得到 Google Clips 相機一部，另外三位仿寫者將得到 Google Chrome 抱枕一個。
5. 我要利用此次活動來給本身後面的創做留出預創做時間，來製造一種我有能力作到每週更一篇高質量乾貨的假象。

就這樣。

投稿連接

點擊這裏投稿