Parsing using pixate to make shared element elements extend transition effects

Haven't updated the tutorial for a long time. Recently a busy. Today, a simple sharing of how to use pixate to make use of a single element to extend the transition effect.

The effect is as follows:

In fact, this effect in the pixate is not difficult to make, but the process is relatively a little cumbersome.

The most important thing is to be clear about what you want to achieve and how you can split and assemble some of the original to achieve your goal in this process.

First, I analyzed some of the key details of the effect I wanted, which helped me better to choose which way to achieve the effect I wanted.

First, the key details are as follows:

The Transition (transition animation) of the Cover image (the cover map) visually needs to appear to be seamlessly connected.

The card (picture)-specific properties are displayed in the default state. That is: Cover image (cover map) of the left/right corner and card (cards) need to have a consistent rounded corners effect)

When cover image (cover) is transferred to the detail (Detail page), the thumbnail (thumbnail) shown needs to be four angles.

Card (cards) on a title (title) alone with fade in/out effect of the fade

Card (cards) when transferred to detail (Details page) has the effect of stretching from the middle

Based on these key details, I extracted the required elements separately.

Split the card of the cover page into 4 different elements:

Image for transition (used as a transition animation and as a thumbnail for detail pages)

Cover image (used as the default display)

Card background (used for the default display of the clip background, while making a copy of the same layer for the animation footage that is displayed when the transition is stretched)

Title (separate title for fade-in/out fade animation)

　Second, the realization principle:

In fact, the principle of implementation is very simple, we start with a rounded corner of the cover image and card background together by default, while the image for transition placed in the same position as cover image, and set it to hide.

When the target card is clicked, the default cover image with rounded corners is hidden, and the image for transition is immediately displayed and the position is moved and scaled. Finally, set its size and position in the detail detail page. Such a "cynical" process allows you to see a picture card with rounded properties by default, but when you go to the details page, the picture appears as a normal four-angle picture.

Finally, set the title title animation alone.

　　Third, the layout structure:

Then use the material to make the following layout. (Theoretically, there is no strict stipulation on the layout that the image for transition must be placed above the cover image.) But in real-world projects, we'll find out whether it's from the point of view of packing hierarchy or setting up a few key scenarios in the whole project. It is convenient to package cover image and card into a group for a theme. It is a good choice to have the image for transition independent attached to the card combination. )

　Four, the Transition animation principle:

There is no custom animation path within the pixate. So it's difficult to make similar path animations.

But we can simulate a part of the path animation through simple analysis.

In this case, we can see that cover image actually produces the animation effect of the curve line by the descent of the Y axis and the translation of the x axis and the scaling of itself.

We can see from the image below that the purpose is to move from point A to position B.

In this process, the descent and translation are 2 separate steps, but we can translate the drop by setting the delay difference between the delay of 2 moves, and then zoom in with the zoom and set the appropriate animation curve to achieve the final effect.

This process requires patience and continuous debugging to debug a more satisfying effect. So you must be patient in making similar effects and try constantly. Avoid impetuous ~