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. 我要利用此次活动来给本身后面的创做留出预创做时间，来制造一种我有能力作到每周更一篇高质量干货的假象。

就这样。

投稿连接

点击这里投稿