Origami Five minutes 0 Basic primer Cheats

Facebook's new origami plug-in is very powerful, with sketch can be very convenient to handle the demo animation. Given that there are few tutorials in the country today, Tencent students have sorted out a origami entry document, even if the 0 Foundation can be quickly started, strongly recommended >>>

As early as Facebook launched Facebook Home, the belief that the powerful prototype tool quartz composer into a lot of designers, without the need to write code can output delicate and rich animation, this is too diao, and everyone else, At that time I also vowed to learn this stuff, so began to reference the teaching video, and even with Quartz composer guideline attempt to translate, the results found not so simple. So learn QC this thing has been stranded, until Facebook and launched the paper, with origami This plug-in, QC's threshold instantly reduced a lot, finally, feel oneself into!! Especially with sketch linkage, do demo is really convenient a lot. Here, according to their own understanding of the summary of the various materials to origami collated an introductory document, really can help 0 basic students to get started, welcome the same students in the study together to discuss, there is a wrong place to

　　Basic concepts

First of all, the "module" (patch), the module is the most basic QC elements, different modules to achieve different functions, to build a prototype, in fact, the different modules in accordance with the logic like building blocks that assembling the process.

Modules can be easily differentiated into two categories: rounded corners and square corners.

Fillet is the most common module, and the square corner module is called "Macro" (Macro), you can double-click into the detailed edit. (I understand it as a folder)

The module will also have the color difference, the blue module is the output module, can be seen in the canvas, the black module is the most common state; the purple module indicates that there are other child modules inside the module.

Modules and modules are connected in the form of wiring, the left side of the module is the input interface, the right side is the output interface, a module to the right side of the output point to the B module to the left of the input point, you can output the results of a module to B module.

　　Basic logic

This model is in an article inside a friend to share, I feel very in place, basically each operation is this kind of execution logic.

Each animation has an interactive trigger action, and then use a switch to control the two states of an action, the two states corresponding to the transformation of two numeric values, and then in the layer of the value of the change before the number of elastic animation to control the dynamic effect.

The image below is the simplest example of zooming in and out, where the value of the image to the size of an initial value and end values, you can simply click to zoom in on the image to reduce the effect of the reduction ~ ~ ~ ~

　　A small test of a sledgehammer

After figuring out the basic concepts and basic logic, you can try it.

Let's start with a new origami file.

The following figure, will pop the left and right two windows, this is origami default file, which can also be seen origami for mobile ~ The first patch can control the right mobile phone style, horizontal screen or vertical screen, and so on, the second patch is the square horn, which is said above the macro (Macro), Double-click it to put what we want to design on the phone. The third patch is the blue display layer.

Each patch can double click to change the name, in the later content becomes more, the name becomes very important. You can see that each patch has its own input and output parameters, can be adjusted to try the effect ~ ~ ~

In the viewer window, there are many handy shortcuts to adjust the style of presentation. For example, every time I get used to getting rid of my hand with my cell phone ... In the viewer window activation, the keyboard input h, you can remove the hand, keyboard input =/-can switch the background style, keyboard input F can be full screen display, remove the phone box.

Demo1. Hello Origami

According to the most habitual practice of developing tutorials, let's start with a "Hello origami" demo.

Double-click Layer Group to enter the editing state in the interface, where an existing patch is fill Layer, which is a fill layer that is used to set the background.

In the editing area, keyboard input T, there is a text Layer. Here, the shortcut key for all patch libraries is COMMAND + ENTER. (Please call me a quick-key addict ~)

You can see that the viewer area has "text" Display, selected text Layer Press "Command+1", you can call out this Layer settings, you can easily adjust to try, we wrote in the text "Hello origami", Finish Demo1 ~ ~ ~ ~

Demo2, interactive origami

Next we try to get the case to interact and make a demo that clicks the window, the copy color, and the background color swap.

In the editing window, keyboard input I, you can see out of a Interaction2 purple patch, this is an interactive instruction patch, output interactive instructions, down is the mouse down state, up is the mouse click State, tap is touch, drag is dragging (here mention, From the phone to operate, feel up and tap is the same, I do not understand a bit.

In the edit window, keyboard input "command + enter", exhaled patch Library, input color Transition, actually see the name everyone should know what this is, right is this thing to switch colors. Then in the edit window, the keyboard enters "SHIFT + S" to get switch patch, which is a switch.

Connect a few patch, we can switch the color of Hello Origami, the same way, the background and then synchronized switch, Demo2 complete ~ ~ ~ ~ ~

and switching colors The same reason, we can use transition to toggle the size of the text. In layer, scale is the element that controls size, varies by percentage, 1 is 100%, and so on. At this time you may feel that the switch effect is not soft, very blunt, in the editing window, keyboard input A, there is a pop Animation, this is an animation transition effect, put this patch before the color change, there will be transition effect ~ ~ ~ ~

As shown below, come out with an animation of the simplest feeling of a splash screen.