找回密码
 立即注册
查看: 3507|回复: 0

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

[复制链接]
发表于 2015-10-24 19:40:40 | 显示全部楼层 |阅读模式
本教程演示了如何使用这些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.    if (elm_win_wm_rotation_supported_get(ad->win))
  8.    {
  9.       int rots[4] = { 0, 90, 180, 270 };
  10.       elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
  11.    }

  12.    evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);

  13.    // Conformant
  14.    ad->conform = elm_conformant_add(ad->win);
  15.    evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  16.    elm_win_resize_object_add(ad->win, ad->conform);
  17.    evas_object_show(ad->conform);

  18.    // Naviframe
  19.    ad->nf = create_main_view(ad);
  20.    elm_object_content_set(ad->conform, ad->nf);

  21.    // Show the window after the base GUI is set up
  22.    evas_object_show(ad->win);
  23. }
复制代码
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.    navi = elm_naviframe_add(ad->conform);

  7.    list = elm_list_add(navi);
  8.    elm_list_mode_set(list, ELM_LIST_COMPRESS);

  9.    elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, navi);
  10.    elm_list_item_append(list, "Color", NULL, NULL, color_cb, navi);
  11.    elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, navi);
  12.    elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, navi);
  13.    elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, navi);
  14.    elm_list_item_append(list, "ResizableFlip", NULL, NULL, resizable_flip_cb, navi);
  15.    elm_list_item_append(list, "Translation", NULL, NULL, translation_cb, navi);
  16.    elm_list_item_append(list, "Wipe", NULL, NULL, wipe_cb, navi);
  17.    elm_list_item_append(list, "Zoom", NULL, NULL, zoom_cb, navi);
  18.    elm_list_item_append(list, "Custom", NULL, NULL, custom_cb, navi);
  19.    elm_list_go(list);

  20.    nf_it = elm_naviframe_item_push(navi, "Transit", NULL, NULL, list, NULL);

  21.    return navi;
  22. }
复制代码

本教程描述只旋转和缩放的实现。 关于其他影响的更多信息,请参阅 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. }
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
欢迎来到泰泽网:http://www.tizennet.com/ 泰泽论坛:http://bbs.tizennet.com/ 好没有内涵哦,快到设置中更改这个无聊的签名吧!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|泰泽应用|泰泽论坛|泰泽网|小黑屋|Archiver|手机版|泰泽邮箱|泰泽网 ( 蜀ICP备13024062号-1 )

GMT+8, 2024-11-24 03:13 , Processed in 0.063643 second(s), 20 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表