The technical tutorial of HenCoder’s first season of custom Views — Drawing — is over. Before we start the next season — Layout — there’s one last part of the drawing section, which I mentioned last month: the “Copycat Cool Interface” campaign.

The purpose of the campaign is simple:

  1. A lot of people have been learning HenCoder for three months, and they just feel that they’ve learned a good kung fu, but they don’t know how to use it. In fact, you learn these things slowly will reflect their value, but if you are more impatient, it doesn’t matter, today’s copy is for you to prepare, you finished today’s copy will be pleasantly surprised to find that “I have really so cattle force”.

  2. In addition to asking you to prove yourself, I want to prove it for myself. Prove what?

    In this day and age of stars on Github, I’m sure many people, when they first see HenCoder, are conditioned to think that HenCoder is nothing more than a worthless blog/column/public account that is boasting more than it is doing. So I’m going to show you what HenCoder readers can do after just three months of learning with me in their spare time with no instructions. At the end of the event, I want to show everyone that while many people are busy with their social reputation and likes, there are still people who are working hard and actually doing something!

  3. Leave some pre-writing time for the next season, the layout section, so that you will continue to think that I am really productive and can write a complex article and post a video in a week (maybe that is the real purpose of this campaign?). .

Introduction of activities

This activity is divided into three parts:

  1. I’ve taken a few of the classic App interface drawing parts and asked HenCoder readers to volunteer to write a copy. After completing the imitation, upload your project to Github and send it to me through the chat interface of the official account.

  2. Selection – public number to complete (is me) I will be in the manuscript, each copy of the content of the selection of a most representative copy, as an example, the copy of the writing effect diagram, copy write code and copy to share, let everyone see you do the results, but also see you;

  3. Finally, I’m going to invite members of the original development team who wrote these parodies to comment on the selected pieces. You have the ability to copy, but also the courage to let the original author review. Don’t be afraid to let the original author review your copycat code. It’s a great opportunity to get promoted.

Copy write content

From prior to the vast number of sample, I finally settled on four to copy written (because I forget to keep the message, before you submit the message has been automatically deleted, now already can’t from the background of each submitter replied to, so give you selected here and didn’t selected the submitter than heart, thank you) :

  1. Instant like effect:


    This seemingly simple effect is not so simple. For example, if the number on the right jumps character by character, rather than the whole number being replaced with a new number in a jump, this is a bit difficult. However, the technical points needed for this effect can be found in HenCoder’s series of articles.

  2. Mint Healthy sliding tape Measure effect:

    This is the Mint Health weight setting screen. You can set your weight by swiping horizontally. It was done very delicately.

    Note: If you can’t do the sliding operation, you can make the sliding automatic (for example, after clicking the button, the tape will automatically slide horizontally and then gradually stop), because this part belongs to touch feedback, which I haven’t covered yet.

  3. The sports record interface at the top of mi Sports home page:

    Note: In the first half, the circle effect similar to fireworks is the process of connecting external devices, and in the second half, the movement status is displayed after successful connection. The specific details of the effect can be seen in the animation.

    Note: The background should be pure color, not consistent with the blue remote mountain background of millet movement.

  4. Flipboard repage-turning effect (enhanced version)

    Flipboard, my last company, is best known for its page-turning interactions. This time I add a little more difficulty: in addition to the page-turning effect, plus 270° rotation.

    As you can see from previous HenCoder posts, this effect has been used before, but I haven’t talked about its implementation (although many people have asked). In fact, this animation is not too difficult to do if you understand the content of each episode and do the exercises.

    If you are going to participate in this mock writing campaign, you can choose one of these four effects, write it out, then upload the project to GitHub, click on the submission link at the end of the article, and submit the project address to me. (Or you can submit it through the conversation interface of the wechat official account “HenCoder”.) (Deadline for submission: 23:59, Oct 19)

    Then, I’ll pick the most representative one, give it to the original developer of the app, and let them comment on it, and I’ll publish the results together.

The prize

The event is sponsored by Insight. IO. I’ll talk about sponsors later. I know you care most about the prize:

  • 1 first prize, by the mass vote, from the four selected imitation writers to choose the “best” one. The prize is Google Clips camera:

    Google just released a new product. It’s really cool. I wanted to buy one myself, but when I saw the price, I quietly closed the page.

  • Second prize 3, that is, the other three copywriters. The prize is a Google Chrome throw pillow:

    That’s the one on the left.

  • In addition, each of the four original developers who contributed to the review will get a Chrome throw pillow.

About insight. IO

That is, the sponsor dad who provided support for the faith recharge of this activity:

For those of you who haven’t heard of Insight, insight is a browser-side code reading and code searching service that makes it easy to read code online. More and more people now have the need to read code online, such as code from open source libraries or online review Pull Requests submitted by colleagues. Insight. IO improves the reading experience by turning static code lying on the page into dynamic, auto-prompted, and jumpeable code.

Don’t understand?

If you don’t know, the rest of the campaign will rely on the services of Insight. IO, as you’ll see.

Of course, anyone interested in improving their own and their team’s code reading experience can go to their website right now: Insight. IO.

conclusion

Finally, summarize the content of the activity:

  1. Choose one of the four described above: instant like effect, Mint Health sliding tape measure, Mi motion recording interface, Flipboard page turning effect (enhanced version);
  2. After completing the imitation, upload the code to GitHub, and submit the project address through the menu of HenCoder wechat official account.
  3. Each effect selects a representative for the original developer to comment on;
  4. The four finalists will pick the best one, which gets a Google Clips camera for its copycat and a Google Chrome throw pillow for the other three.
  5. I’m going to use this event to give myself some pre-writing time for my later work, to create the illusion that I’m capable of producing a high-quality piece of dry goods every week.

That’s all.

Send link

Click here to contribute