本教程演示了如何使用这些api实现各种各样的动画效果。
初始化应用程序的布局
应用程序使用UI组件,例如 elm_conformant 和 elm_naviframe 视图管理、布局类等 elm_list 组成的屏幕,和UI组件,例如 elm_button 和 elm_image 视图内的内容。
交通设计应用各种动画过渡效果 Evas_Object 。 下面的转换效果Tizen本机应用程序的支持:
混合
颜色
褪色
翻转
旋转
过渡
擦
变焦
初始化应用程序的布局:
1.创建的布局 create_base_gui () 函数。 首先,创建一个窗口和 elm_conformant 组件被添加到它与一个指标来装饰窗口。elm_naviframe 组件作为视图管理器窗口添加,提供窗口标题的功能。- static void
- create_base_gui(appdata_s *ad)
- {
- // Window
- ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
- elm_win_autodel_set(ad->win, EINA_TRUE);
- if (elm_win_wm_rotation_supported_get(ad->win))
- {
- int rots[4] = { 0, 90, 180, 270 };
- elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
- }
- evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
- // Conformant
- ad->conform = elm_conformant_add(ad->win);
- evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
- elm_win_resize_object_add(ad->win, ad->conform);
- evas_object_show(ad->conform);
- // Naviframe
- ad->nf = create_main_view(ad);
- elm_object_content_set(ad->conform, ad->nf);
- // Show the window after the base GUI is set up
- evas_object_show(ad->win);
- }
创建的主要观点 create_main_view () 函数。 主要视图由naviframe包含一个列表。 这个函数返回一个列表naviframe对象指针的内容。
- static Evas_Object*
- create_main_view(appdata_s *ad)
- {
- Elm_Object_Item *nf_it;
- Evas_Object *navi, *list;
- navi = elm_naviframe_add(ad->conform);
- list = elm_list_add(navi);
- elm_list_mode_set(list, ELM_LIST_COMPRESS);
- elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, navi);
- elm_list_item_append(list, "Color", NULL, NULL, color_cb, navi);
- elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, navi);
- elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, navi);
- elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, navi);
- elm_list_item_append(list, "ResizableFlip", NULL, NULL, resizable_flip_cb, navi);
- elm_list_item_append(list, "Translation", NULL, NULL, translation_cb, navi);
- elm_list_item_append(list, "Wipe", NULL, NULL, wipe_cb, navi);
- elm_list_item_append(list, "Zoom", NULL, NULL, zoom_cb, navi);
- elm_list_item_append(list, "Custom", NULL, NULL, custom_cb, navi);
- elm_list_go(list);
- nf_it = elm_naviframe_item_push(navi, "Transit", NULL, NULL, list, NULL);
- return navi;
- }
本教程描述只旋转和缩放的实现。 关于其他影响的更多信息,请参阅 transit.c (在运输文件和API 移动或 可穿戴应用程序)或使用 NULL 代替。 下图演示了旋转和缩放效果。 图:旋转和缩放
实现旋转的效果
在列表中选择旋转效应时,相关的回调函数实现动画效果。 作为一个发送的数据 Evas_Object 。
实现旋转效应:
1.使用 elm_transit 对象的 elm_transit_add () 函数添加运输效果:
- static void
- rotation_cb(void *data, Evas_Object *obj, void *event_info)
- {
- Evas_Object *layout = (Evas_Object *) data;
- Elm_Transit *transit = elm_transit_add();
- // 360 degree rotation effect in the clockwise direction
- elm_transit_object_add(transit, layout);
- elm_transit_effect_rotation_add(transit, 0, 360);
- elm_transit_duration_set(transit, 1);
- elm_transit_go(transit);
- }
放大效应是在列表中选择时,一个相关的回调函数实现动画效果。 作为一个发送的数据 Evas_Object 。 实现变焦效果: - After adding the transit object, add an Evas_Object to get the zoom effect:
- static void
- zoom_cb(void *data, Evas_Object *obj, void *event_info)
- {
- Evas_Object *layout = (Evas_Object *) data;
- // Zoom out to scale 0.6
- Elm_Transit *transit = elm_transit_add();
- elm_transit_smooth_set(transit, EINA_FALSE);
- elm_transit_object_add(transit, layout);
- elm_transit_effect_zoom_add(transit, 1.0, 0.4);
- elm_transit_duration_set(transit, 0.5);
- // Zoom in to the original size
- Elm_Transit *transit2 = elm_transit_add();
- elm_transit_smooth_set(transit2, EINA_FALSE);
- elm_transit_object_add(transit2, layout);
- elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
- elm_transit_duration_set(transit2, 0.5);
- elm_transit_chain_transit_add(transit, transit2);
- elm_transit_go(transit);
- }
|
