search

Samsung / rlottie

A platform independent standalone library that plays Lottie Animation.
Other
1.18k stars 226 forks source link

Adaptive Transition #331

Closed zyzniewski closed 4 years ago

zyzniewski commented 4 years ago

Hi! Yesterday I watched Hermet's presentation and I am wondering how to actually implement adaptive transition with dynamic content like this: https://www.youtube.com/watch?v=Q2c7Hj_Sa1o&feature=youtu.be&t=2080

Thanks in advance

hermet commented 4 years ago

Hello, Thanks for watching the video :-)

Firstly, the adaptive transition is a showcase for inspiring people to make visual effects with lottie resources. Actually that is out of official Lottie Spec but it's doable with rlottie library since rlottie can provide detail info of animation with such a traditional raw vector data - shape, fill, strike path, gradient, etc. (You can see the interface here: LOTNode, LOTLayerNode in rlottie/inc/rlottie_common.h)

In the meantime, that demos are actual working prototypes on Tizen UI system(EFL) which provides 3D transformable UI. Thus while the UI system tracks the Lottie shapes every frames, it reads the shape info and transform any UI components (i.e video object) according to shape path.

Designers could design Lottie Animation, specify a certain shape that is supposed to be switched by other UI components in runtime. For doing this, designers need to specify a name to a Shape or ShapeLayer in the AE. After that, you can pick up the shape by that name id in the program(LOTNode gives it) and .. you should figure the boundary region out of the shape by basic texture mapping approach... The boundary is the output region you should transform any UI components to.

Hopefully, my description is understandable. and question is always welcome.

zyzniewski commented 4 years ago

Good morning Hermet!

Just to summarize:

Did I get this correctly? If so, does this mean it will only work for simple transforms like position, scale, rotation? Something more advanced like opacity needs to be handled separately, right? How to actually detect what kind of transition was applied? For example, distinguish rotation from shape change?

Thanks!

hermet commented 4 years ago

You almost caught up the approach! Evas Map is used in this case. Basically, we can apply color/opacity changes as well. and.. yes we have to distinguish the rotation from the shape change. At this moment it's a somewhat limited but it's doable to rotate 2d/3d, translation and morphing shapes.

zyzniewski commented 4 years ago

Thanks again! I still have a strong feeling that I am missing something. How can you distinguish the rotation from the shape change if the only thing you "see" is the result of rlottie rendering in LOTNode (without doing some heavy wizardry of comparing two LOTLayerNodes)? Is the source code of this somewhere available, in Tizen UI?

hermet commented 4 years ago

Ah, Come to think of it, it needs the transformation matrix in the end, at this moment the rotation is only available for the Rectangular shapes, it assumed the vertex coordinates direction is clock-wise, begins from the top-right vertex in the order.

see: https://git.enlightenment.org/core/efl.git/tree/src/lib/elementary/efl_ui_vg_animation.c?h=devs/hermet/lottie

146 line, _part_draw() function.