The Qc+origami Message page of the primary article in the design of dynamic effect

The final effect of the following figure, temporarily ignore this AV-like quality ... (video screen turn gif to kill me)

Before making a formal move, it is particularly important to do foreplay--to analyze and decompose the dynamic effect.

You see, this is how I disassemble this dynamic:

Click on any item in the micro-letter message list to deepen the background;

The message Dialog page slides from right to left into the screen;

On the message dialog page, move to the right to return to the previous level;

In total, the three-step but!, like me, will find that there are many subtle effects:

Hold down the message list item but do not let go, the item is always in the selected state is to deepen the background, straight to let go, the message dialog page only slide into the left;

The message page slides from right to left, and the original list page slides to the left, but slightly slower and vice versa;

On the page of the message to return to the previous level of the process, the navigation bar left and right button fade, title with the direction of the finger gradually gradually out.

After decomposition, we make the idea of dynamic effect is clear, the first step is to open the computer brush a little bo then open ... Sorry ...

Due to the limitations of space, here I only in the first half: Click on list items slide out of the message dialog page to explain, temporarily do not speak right to return to the previous level of this section.

All right, let's swing the oars together!

Step 1

Click on the list item, the item color deepens, and the message dialog page slides to the left;

Because of our previous decomposition, we already know which elements of the page will change, so when we prepare the material, we have to put these elements in a single dictatorship, such as the buttons and title in the navigation bar.

Then drag all the elements into the canvas, as shown below; (The opportunity to spit: QC can not achieve a lot of pictures to drag into the picture is really enough!)

Then move all the elements to the correct position against their own micro-interface;

Then add the hit area (Hot zone) module, resize to the list item size, position to move to the diagram position, and add Interaction2 (interactive) module, the Interaction2 module and hit area module connection;

Here, I need to Interaction2 this module for detailed description, do a good job of notes;

The right side of the Interaction2 has four output terminals: Down,up,tap,drag;

Drag very good understanding, pull it off, not, drag it, and in the origami website provided by the tutorial on the use of drag, here also temporarily do not mention;

Tap means a complete click action, that is, the finger pressed-and then lifted to see the completion of the action, will touch the effect;

Up means to lift the action, just lift the finger and then touch the effect; I know there are children's shoes to ask, you do not press WHERE to lift up!? Please sit down with this boy's shoes and let me blow you up slowly.

This is true, the tap trigger is generally not for the control itself, mainly to say how other things after tap operation how to play the second time. And up and down is generally for the middle of the control state, such as micro-letter message list items, press down when the background is deepened, when raised, slide into the message dialog page. If directly with tap operation Trigger, the effect is to press down without effect, lift up the background and slide out of the dialogue page;

The actual results of the first step, in fact, is very simple, as shown:

(1) Hot zone red is unsightly, then remove the hit area module of the setup Mode check state, hide it.

(2) Connect the Interaction2 down output port to the switch's turn on input, and then connect the Switch module's output to the transition (conversion) module's input, transition's start state 0, the end state is 1, And give it a gray rectangle of transparency, meaning in the hot zone after the opening of the gray rectangular block transparency from 0 to 1 conversion. This realizes the effect of the color deepening after the message list item is pressed;

(3) Connect the Interaction2 up output to the switch's turn on input, then connect the switch module's output to the transition module's input end, transition's start state 640, and the end state is 0, and give it the message dialog page of the x coordinates, meaning that in the hot zone after the lifting operation, the message dialog page of the X coordinates from 640 to 0, so that the message dialog page to achieve the effect of sliding;

(4) The Yellow line in the picture is like "wire" used to transmit signals, but now the reform and opening up 30 years, the people's living standards have improved, I have used Bluetooth wireless technology, add wireless broadcaster (wireless launch) module, paired wireless Rreceiver, You can use "wireless" to transmit signals across the hierarchy without using a "wire".

In addition, I have set up a pop (elastic) module in front of each transition module, in order to make the conversion more smooth and not blunt, all the parameters of the pop can be adjusted.

Step 2

When the Message page slips, the list page title is left out, the top right corner icon fades out, the message Dialog page title is tapered to the right, and the return button and contact icon fade in, while the list page slides at a slower speed.

(1) Connect the Interaction2 tap output to the switch's turn on input, then connect the output of the switch module to the input end of the two transition (conversion) module, the first transition start state 0, The end state is-320 and assigns it to the X coordinate of the title of the list page, meaning to turn on switch (switch) after clicking on the hot zone, thereby opening the conversion of the X coordinate value of title of the list page from 0 to 320. Other icon fade in, fade out, gradually into the same. (For ease of distinction, I changed the name of each transition module)

(2) Connect the Interaction2 tap output to the switch's turn on input, then connect the switch module's output to the input end of the transition (conversion) module, the first transition's start state 0, and the end state is-200 and assigns it to the x-coordinate of the list page, opening the conversion of the list page x coordinates from 0 to 200. Before transition, I added a classic Animation (traditional dynamic) module, you can set the control's motion curve, so that its motion acceleration changes more delicate.

So, clicking on the list item on the Micro-mail List page slides out of the message dialog page and is finished. This part of the interactive module, I have done a more detailed elaboration, but next, through the right hand gesture to return to the previous level how to achieve, I will be in the following article to share with you.