Tizen应用api实现各种创建基本的交互转换代码

流星悟语

本教程演示了如何使用这些api实现各种各样的动画效果。

初始化应用程序的布局
应用程序使用UI组件,例如 elm_conformant 和 elm_naviframe 视图管理、布局类等 elm_list 组成的屏幕,和UI组件,例如 elm_button 和 elm_image 视图内的内容。

交通设计应用各种动画过渡效果 Evas_Object 。 下面的转换效果Tizen本机应用程序的支持:

混合
颜色
褪色
翻转
旋转
过渡
擦
变焦
初始化应用程序的布局:

1.创建的布局 create_base_gui () 函数。 首先,创建一个窗口和 elm_conformant 组件被添加到它与一个指标来装饰窗口。elm_naviframe 组件作为视图管理器窗口添加,提供窗口标题的功能。

1. static void
   
2. create_base_gui(appdata_s *ad)
   
3. {
   
4.    // Window
   
5.    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   
6.    elm_win_autodel_set(ad->win, EINA_TRUE);
   
7. 
   
8.    if (elm_win_wm_rotation_supported_get(ad->win))
   
9.    {
   
10.       int rots[4] = { 0, 90, 180, 270 };
    
11.       elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
    
12.    }
    
13. 
    
14.    evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
    
15. 
    
16.    // Conformant
    
17.    ad->conform = elm_conformant_add(ad->win);
    
18.    evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    
19.    elm_win_resize_object_add(ad->win, ad->conform);
    
20.    evas_object_show(ad->conform);
    
21. 
    
22.    // Naviframe
    
23.    ad->nf = create_main_view(ad);
    
24.    elm_object_content_set(ad->conform, ad->nf);
    
25. 
    
26.    // Show the window after the base GUI is set up
    
27.    evas_object_show(ad->win);
    
28. }

复制代码

2.
创建的主要观点 create_main_view () 函数。 主要视图由naviframe包含一个列表。 这个函数返回一个列表naviframe对象指针的内容。

1. static Evas_Object*
   
2. create_main_view(appdata_s *ad)
   
3. {
   
4.    Elm_Object_Item *nf_it;
   
5.    Evas_Object *navi, *list;
   
6. 
   
7.    navi = elm_naviframe_add(ad->conform);
   
8. 
   
9.    list = elm_list_add(navi);
   
10.    elm_list_mode_set(list, ELM_LIST_COMPRESS);
    
11. 
    
12.    elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, navi);
    
13.    elm_list_item_append(list, "Color", NULL, NULL, color_cb, navi);
    
14.    elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, navi);
    
15.    elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, navi);
    
16.    elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, navi);
    
17.    elm_list_item_append(list, "ResizableFlip", NULL, NULL, resizable_flip_cb, navi);
    
18.    elm_list_item_append(list, "Translation", NULL, NULL, translation_cb, navi);
    
19.    elm_list_item_append(list, "Wipe", NULL, NULL, wipe_cb, navi);
    
20.    elm_list_item_append(list, "Zoom", NULL, NULL, zoom_cb, navi);
    
21.    elm_list_item_append(list, "Custom", NULL, NULL, custom_cb, navi);
    
22.    elm_list_go(list);
    
23. 
    
24.    nf_it = elm_naviframe_item_push(navi, "Transit", NULL, NULL, list, NULL);
    
25. 
    
26.    return navi;
    
27. }

复制代码

本教程描述只旋转和缩放的实现。 关于其他影响的更多信息,请参阅 transit.c (在运输文件和API 移动或 可穿戴应用程序)或使用 NULL 代替。 下图演示了旋转和缩放效果。

图:旋转和缩放

实现旋转的效果
在列表中选择旋转效应时,相关的回调函数实现动画效果。 作为一个发送的数据 Evas_Object 。

实现旋转效应:

1.使用 elm_transit 对象的 elm_transit_add () 函数添加运输效果:

1. static void
   
2. rotation_cb(void *data, Evas_Object *obj, void *event_info)
   
3. {
   
4.    Evas_Object *layout = (Evas_Object *) data;
   
5.    Elm_Transit *transit = elm_transit_add();

复制代码

2.设置旋转量和持续时间:

1. // 360 degree rotation effect in the clockwise direction
   
2.    elm_transit_object_add(transit, layout);
   
3.    elm_transit_effect_rotation_add(transit, 0, 360);
   
4.    elm_transit_duration_set(transit, 1);

复制代码

3.开始运输动画,使用 elm_transit_go () 功能:

1.    elm_transit_go(transit);
   
2. }

复制代码

实现放大的效果

放大效应是在列表中选择时,一个相关的回调函数实现动画效果。 作为一个发送的数据 Evas_Object 。

实现变焦效果:

• After adding the transit object, add an Evas_Object to get the zoom effect:
  

1. static void
   
2. zoom_cb(void *data, Evas_Object *obj, void *event_info)
   
3. {
   
4.    Evas_Object *layout = (Evas_Object *) data;

复制代码

2.从原来的尺寸（1.0），以0.4倍的原始尺寸设置缩放，并设置持续时间：

1.   // Zoom out to scale 0.6
   
2.    Elm_Transit *transit = elm_transit_add();
   
3.    elm_transit_smooth_set(transit, EINA_FALSE);
   
4.    elm_transit_object_add(transit, layout);
   
5.    elm_transit_effect_zoom_add(transit, 1.0, 0.4);
   
6.    elm_transit_duration_set(transit, 0.5);

复制代码

3.同样地，设置缩放尺寸（0.4）回到原来的尺寸（1.0），和设置持续时间：

1.    // Zoom in to the original size
   
2.    Elm_Transit *transit2 = elm_transit_add();
   
3.    elm_transit_smooth_set(transit2, EINA_FALSE);
   
4.    elm_transit_object_add(transit2, layout);
   
5.    elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
   
6.    elm_transit_duration_set(transit2, 0.5);

复制代码

4.同时设置效果的顺序应用，并启动动画：

1.    elm_transit_chain_transit_add(transit, transit2);
   
2.    elm_transit_go(transit);
   
3. }

复制代码