Tizen Native UI animation

Question

I'm creating a native Tizen application for wearables.

Started using the UI builder which can generate code for navigating between different application views:

Tizen however is not that good in documentation. There is a mention in the website about "Maintain a smooth flow" between views:

But they don't describe at all, how can I do this kind of "animation" between views.

This is the motivation of the question: how can I do a seamless transition from a large logo image view to a detailed view which also contains (a small size) logo?

Please note again: I'm creating a native application (not web, not .NET!). So unless it's impossible to do this natively, please don't recommend me to change (to web or .NET).

Answer 1

In Tizen Native, view transition is managed by naviframe item push/pop. i.e. elm_naviframe_item_push / elm_naviframe_item_pop

To implement the above view transition, you can use the new API elm_naviframe_item_push_from. elm_naviframe_item_push_from will be available with Tizen 5.5 on Tizen Studio 4.1 (not right now on Tizen Studio 4.0 but it seems that Tizen Studio 4.1 is available by December 2020.)

Since UI builder generates the code elm_naviframe_item_push only, I think you need to write the code elm_naviframe_item_push_from manually instead of elm_naviframe_item_push.

The view transition you uploaded looks like a naviframe item pop case after item pushing with elm_naviframe_item_push_from.

e.g.

/*
 * When the following code is called, view transition from small_image to 
 * content_with_big_image is started.
 * When the view transition is finished, conent_with_big_image is displayed on the screen.
 */
elm_naviframe_item_push_from(naviframe, NULL, NULL, NULL, content_with_big_image, "empty", small_image);

/*
 * When naviframe item pop is called (e.g. HW back button) after calling the above code,
 * view transition from content_with_big_image to small_image is started.
 * When the view transition is finished, the initial view with small_image is displayed
 * on the screen.
 */
elm_naviframe_item_pop(naviframe);

Thank you.