HenCoder「仿写酷界面」征稿
HenCoder 的自定義 View 部分第一季——繪制——的技術講解部分已經結束。在下一季——布局——開始之前,繪制部分還有最后一個環節,那就是在上個月我提到過的:「仿寫酷界面」活動。
這次活動的目的很簡單:
很多人跟著 HenCoder 學了三個月了,只覺得學了一身好功夫,卻無從施展和印證。其實你學到的這些東西慢慢都會體現出它們的價值的,不過如果你比較心急,沒關系,今天的仿寫就是給你們準備的,你做完了今天的這幾個仿寫就會驚喜地發現「原來自己已經真的這么牛逼了」。
除了讓你們自我證明,我也想為自己證明一下。證明什么呢?
在現在這個連 github 都會有人刷 stars 的急功近利的時代,我相信很多人在第一眼看到 HenCoder 的時候,也會習慣性地以為它只不過是一個吹噓大于干貨的沒價值的博客 / 專欄 / 公眾號。那么通過這次的活動我就要讓人們看到,HenCoder 的讀者們在業余時間里跟著我學習了短短三個月后,就能在毫無指導的情況下做出這么炫酷的效果。我要在活動結束后讓大家看到,在很多人都忙于刷自己的社交聲望、刷點贊數的時候,依然是有人在認真做干貨,并且真的做出來了!
為下一季——布局部分留出預創作的時間,讓你們繼續誤以為我真的是那么高產,用一周時間就能寫出一篇那么復雜的文章 + 連錄帶后期做出一個視頻[乖巧](也許這才是這次活動真正的目的?)。
活動簡介
這次活動分為三部分:
仿寫——讀者來完成(就是你們啦)
我選取了幾個比較經典的 App 的界面繪制部分,由 HenCoder 的讀者自愿進行仿寫。仿寫完成后,把你的項目上傳到 github,通過公眾號的對話界面發送給我;
選稿——公眾號來完成(就是我啦)
我會在投來的稿件中,每個仿寫內容中都選取一個最具代表性的稿件,作為樣例,把仿寫效果圖、仿寫代碼以及仿寫者分享出來,讓大家看到你做的成果,也看到你;
點評——原開發者來完成
最后,我要請來這些仿寫內容的原開發團隊中的成員,請他們對這些選出的優秀稿件進行點評。你有能力仿寫,也更要有膽量讓原作者來審閱。千萬別怕,讓原作者審閱你的仿寫代碼,這可是個得到提升好機會哦。
仿寫內容
從之前投來的茫茫多的樣例中,我最終選定了四個用來仿寫的內容(由于我忘了保留消息,大家之前的提交留言已經被自動刪除,現在已經沒法從后臺對各位提交者進行回復了,所以在這里給各位選中和沒選中的提交者比心,感謝你們):
即刻的點贊效果:
這一個看似簡單的效果,其實并不簡單。例如,右邊的數是一個字符一個字符地跳動的,而不是整個數一起在跳動中被新的數替換掉,這個還是有點難度的。不過這個效果需要用到的技術點,在 HenCoder 的系列文章中都能找到答案。
薄荷健康的滑動卷尺效果:
這個是薄荷健康的體重設定界面,通過橫向滑動的方式來設置體重。做得可以說非常精細了。
注:滑動操作如果不會做的話,可以把滑動做成自動的(例如點擊按鈕后卷尺開始自動橫向滑動,然后逐漸停止),因為這部分屬于觸摸反饋的內容,我還沒有講過。
小米運動首頁頂部的運動記錄界面:
說明:前半段的類似煙花的轉圈圈效果是連接外部設備的過程,后半段是連接成功后的運動狀態顯示。具體的效果細節從動圖中都能看出來。
注:背景選擇純色就好,不必和小米運動的藍色遠山背景一致。
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?。
總結
最后再總結一次活動的內容:
上面描述的即刻點贊效果、薄荷健康滑動卷尺、小米運動記錄界面、Flipboard 翻頁效果(加強版)這四個中,任選一個仿寫;
仿寫完成后,把代碼上傳到 GitHub,然后通過 HenCoder 微信公眾號的菜單來提交項目地址;
每個效果都會選出一個代表來讓原開發者進行點評;
選出的四個代表會選出一個最佳,它的仿寫者將獲得 Google Clips 相機一部,另外三位仿寫者將獲得 Google Chrome 抱枕一個。
我要利用這次活動來給自己后面的創作留出預創作時間,來制造一種我有能力做到每周更一篇高質量干貨的假象。
就這樣。
總結
以上是生活随笔為你收集整理的HenCoder「仿写酷界面」征稿的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Minimum supported Gr
- 下一篇: 代码中特殊的注释技术——TODO、FIX