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 的服務，到時候你就明白了。

當然，有興趣優化自己以及團隊的程式碼閱讀體驗的人，可以現在就去他們的官網看看： https://insight.io 。

總結

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

1. 上面描述的即刻點贊效果、薄荷健康滑動捲尺、小米運動記錄介面、Flipboard 翻頁效果（加強版）這四個中，任選一個仿寫；

2. 仿寫完成後，把程式碼上傳到 GitHub，然後通過 HenCoder 微信公眾號的選單來提交專案地址；

3. 每個效果都會選出一個代表來讓原開發者進行點評；

4. 選出的四個代表會選出一個最佳，它的仿寫者將獲得 Google Clips 相機一部，另外三位仿寫者將獲得 Google Chrome 抱枕一個。

5. 我要利用這次活動來給自己後面的創作留出預創作時間，來製造一種我有能力做到每週更一篇高質量乾貨的假象。

   
   

就這樣。