[
  {
    "category": {
      "categoryName": "case",
      "categoryDesc": "源码引入"
    },
    "categoryDetailList": [
      {
        "typeInfo": {
          "typeName": "ui",
          "typeDesc": "UI布局",
          "typeDetail": ""
        },
        "repositoriesInfoList": [
          {
            "name": "多层级轮播图切换",
            "id": "159",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/swiper_component.gif",
            "description": "本示例介绍使用ArkUI中的Stack组件实现多层级轮播图。该场景多用于购物、资讯类应用。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/swipercomponent/",
              "caseRepositoriesInfo": "",
              "insertCode": "SwiperMainPage()",
              "importCode": "import { SwiperMainPage } from 'swipercomponent';",
              "codeAnnotation": "/**\n       * 功能描述：通过Stack组件堆叠图片，实现多层级效果，配合手势滑动和显式动画实现切换的动画效果。同时通过改变数据中间值currentIndex来改变组件zIndex层级和高度来实现切换的效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/swipercomponent/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "背景模糊效果的自定义TabBar实现案例",
            "id": "158",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/background_blur.gif",
            "description": "在一些主页的场景中，为了实现更好的视觉体验，会给TabBar加上透明的背景模糊效果。本示例主要讲解如何使用系统提供的背景设置的能力，实现背景模糊的效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/backgroundblur/",
              "caseRepositoriesInfo": "",
              "insertCode": "TabsSample()",
              "importCode": "import { TabsSample } from 'backgroundblur';",
              "codeAnnotation": "/**\n       * 功能描述：在一些主页的场景中，为了实现更好的视觉体验，会给TabBar加上透明的背景模糊效果。本示例主要讲解如何使用系统提供的背景设置的能力，实现背景模糊的效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/backgroundblur/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "沉浸式适配案例",
            "id": "156",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/immersive.gif",
            "description": "开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。本案例分别针对Navigation、列表滑动、Web页、底部弹框等场景实现了沉浸式适配。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/immersive/",
              "caseRepositoriesInfo": "",
              "insertCode": "NavImmersive()",
              "importCode": "import { NavImmersive } from 'immersive';",
              "codeAnnotation": "/**\n       * 功能描述：开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。本案例分别针对Navigation、列表滑动、Web页、底部弹框等场景实现了沉浸式适配。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/immersive/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "自定义Stepper",
            "id": "117",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_stepper.gif",
            "description": "在许多场景下，我们都需要引导用户按照步骤完成任务，此功能在HarmonyOS Next中可以使用Stepper来实现，但是Stepper的定制化能力较弱，开发者无法定制上下页切换按钮的样式、位置，因此本例介绍了如何基于Swiper实现Stepper的能力。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/customstepper/",
              "caseRepositoriesInfo": "",
              "insertCode": "CustomStepperViewComponent()",
              "importCode": "import { CustomStepperViewComponent } from 'customstepper';",
              "codeAnnotation": "/**\n       * 功能描述：在许多场景下，我们都需要引导用户按照步骤完成任务，此功能在HarmonyOS Next中可以使用Stepper来实现，但是Stepper的定制化能力较弱，开发者无法定制上下页切换按钮的样式、位置，因此本例介绍了如何基于Swiper实现Stepper的能力。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customstepper/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "自定义TabBar页签案例",
            "id": "2",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_tabbar.gif",
            "description": "本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示，并有一小段动画效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/customtabbar/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "TabViewComponent()",
              "importCode": "import { TabViewComponent } from 'customtabbar';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示，并有一小段动画效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customtabbar/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "swiper指示器导航点位于swiper下方",
            "id": "67",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/indicator_below_swiper.gif",
            "description": "本示例介绍通过分割swiper区域，实现指示器导航点位于swiper下方的效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/indicatorbelowswiper/",
              "caseRepositoriesInfo": "",
              "insertCode": "IndicatorBelowSwiperComponent()",
              "importCode": "import { IndicatorBelowSwiperComponent } from 'indicatorbelowswiper';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍通过分割swiper区域，实现指示器导航点位于swiper下方的效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/indicatorbelowswiper/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "ArkWeb同层渲染",
            "id": "64",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/native_embed.jpg",
            "description": "该方案展示了ArkWeb同层渲染：将系统原生组件直接渲染到前端H5页面上，原生组件不仅可以提供H5组件无法实现的一些功能，还能提升用户体验的流畅度。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/nativeembed/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "WebViewDemoComponent()",
              "importCode": "import { WebViewDemoComponent } from 'nativeembed';",
              "codeAnnotation": "/**\n       * 功能描述：该方案展示了ArkWeb同层渲染：将系统原生组件直接渲染到前端H5页面上，原生组件不仅可以提供H5组件无法实现的一些功能，还能提升用户体验的流畅度。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/nativeembed/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "自定义安全键盘案例",
            "id": "61",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_safe_keyboard.gif",
            "description": "金融类应用在密码输入时，一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景，主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/customsafekeyboard/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "CustomSafeKeyboardViewComponent()",
              "importCode": "import { CustomSafeKeyboardViewComponent } from 'customsafekeyboard';",
              "codeAnnotation": "/**\n       * 功能描述：金融类应用在密码输入时，一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景，主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customsafekeyboard/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "元素超出List区域",
            "id": "51",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/listitem_overflow.gif",
            "description": "本示例介绍在List组件内实现子组件超出容器边缘的布局样式的实现方法。List组件clip属性默认为true，超出容器边缘的子组件会按照List的布局范围被裁剪。为此，可以在List组件内部添加一个占位的ListItem，以达到预期的布局效果。List占满整个窗口或者不可滚动的情况下，也可以在List外占位，同时设置List的clip属性为false达成同样的效果。该布局效果多用于头像、列表子项标题等元素的突出显示。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/listitemoverflow/",
              "caseRepositoriesInfo": "",
              "insertCode": "AboutMeComponent()",
              "importCode": "import { AboutMeComponent } from 'listitemoverflow';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍在List组件内实现子组件超出容器边缘的布局样式的实现方法。List组件clip属性默认为true，超出容器边缘的子组件会按照List的布局范围被裁剪。为此，可以在List组件内部添加一个占位的ListItem，以达到预期的布局效果。List占满整个窗口或者不可滚动的情况下，也可以在List外占位，同时设置List的clip属性为false达成同样的效果。该布局效果多用于头像、列表子项标题等元素的突出显示。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/listitemoverflow/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "手写绘制及保存图片",
            "id": "70",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/hand_wring_to_image.gif",
            "description": "本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能。手写板上完成绘制后，通过调用image库的packToFile和packing接口将手写板的绘制内容保存为图片，并将图片文件保存在应用沙箱路径中。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/handwritingtoimage/",
              "caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
              "insertCode": "HandWritingToImageView()",
              "importCode": "import { HandWritingToImageView } from 'handwritingtoimage';",
              "codeAnnotation": "/**\n       * 功能描述：本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能。手写板上完成绘制后，通过调用image库的packToFile和packing接口将手写板的绘制内容保存为图片，并将图片文件保存在应用沙箱路径中。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/handwritingtoimage/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "视频卡片和列表区域的联动滚动",
            "id": "122",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/video_linkage_list.gif",
            "description": "本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/videolinkagelist/",
              "caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
              "insertCode": "VideoLinkageListView()",
              "importCode": "import { VideoLinkageListView } from 'videolinkagelist';",
              "codeAnnotation": "/**\n       * 功能描述：本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/videolinkagelist/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "城市选择案例",
            "id": "39",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/city_search.gif",
            "description": "本示例介绍城市选择场景的使用：通过AlphabetIndexer实现首字母快速定位城市的索引条导航。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/citysearch/",
              "caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
              "insertCode": "CitySearch()",
              "importCode": "import { CitySearch } from 'citysearch';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍城市选择场景的使用：通过AlphabetIndexer实现首字母快速定位城市的索引条导航。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/citysearch/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "文字展开收起案例",
            "id": "112",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/text_expand.gif",
            "description": "本示例介绍了使用@ohos.measure 组件接口实现文字段落展开收起的功能，且同时介绍了如何解决图文混排的问题。 该场景多用于图文列表展示等。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/textexpand/",
              "caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
              "insertCode": "TextExpand()",
              "importCode": "import { TextExpand } from 'textexpand';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍了使用@ohos.measure 组件接口实现文字段落展开收起的功能，且同时介绍了如何解决图文混排的问题。 该场景多用于图文列表展示等。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/textexpand/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "验证码布局",
            "id": "23",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/verify_code.gif",
            "description": "本示例介绍如何使用Text组件实现验证码场景，并禁用对内容的选中、复制、光标。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/verifycode/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "VerifyCodeViewComponent()",
              "importCode": "import { VerifyCodeViewComponent } from 'verifycode';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍如何使用Text组件实现验证码场景，并禁用对内容的选中、复制、光标。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/verifycode/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "底部面板嵌套列表滑动案例",
            "id": "89",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/bottom_panel_slide.gif",
            "description": "本示例主要介绍了利用panel实现底部面板内嵌套列表，分阶段滑动效果场景。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/bottompanelslide/",
              "caseRepositoriesInfo": "",
              "insertCode": "BottomPanelSlideComponent()",
              "importCode": "import { BottomPanelSlideComponent } from 'bottompanelslide';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍了利用panel实现底部面板内嵌套列表，分阶段滑动效果场景。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/bottompanelslide/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "左右拖动切换图片效果案例",
            "id": "58",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/drag_to_switch_pictures.gif",
            "description": "本示例使用滑动手势监听，实时调整左右两侧内容显示区域大小和效果。通过绑定gesture事件中的PanGesture平移手势，实时获取拖动距离。当拖动时，实时地调节左右两个Image组件的宽度，从而成功实现左右拖动切换图片效果的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/dragtoswitchpictures/",
              "caseRepositoriesInfo": "",
              "insertCode": "DragToSwitchPicturesComponent()",
              "importCode": "import { DragToSwitchPicturesComponent } from 'dragtoswitchpictures';",
              "codeAnnotation": "/**\n       * 功能描述：本示例使用滑动手势监听，实时调整左右两侧内容显示区域大小和效果。通过绑定gesture事件中的PanGesture平移手势，实时获取拖动距离。当拖动时，实时地调节左右两个Image组件的宽度，从而成功实现左右拖动切换图片效果的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/dragtoswitchpictures/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "列表编辑",
            "id": "10",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/todo_list.gif",
            "description": "本示例介绍了通过对List数据源修改实现列表项新增/删除/编辑的功能。该场景多用于待办事项管理、文件管理、备忘录的记录管理等。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/pendingitems/",
              "caseRepositoriesInfo": "",
              "insertCode": "ToDoListComponent()",
              "importCode": "import { ToDoListComponent } from 'pendingitems';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍了通过对List数据源修改实现列表项新增/删除/编辑的功能。该场景多用于待办事项管理、文件管理、备忘录的记录管理等。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pendingitems/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "全屏登录页面",
            "id": "3",
            "image": "https://gitee.com/fanjiaojiaoar/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/modal_window.gif",
            "description": "本例介绍各种应用登录页面。全屏登录页面：在主页面点击跳转到全屏登录页后，显示全屏模态页面，全屏模态页面从下方滑出并覆盖整个屏幕，模态页面内容自定义，此处分为默认一键登录方式和其他登录方式。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/modalwindow/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ModalWindowComponent()",
              "importCode": "import { ModalWindowComponent } from 'modalwindow';",
              "codeAnnotation": "/**\n       * 功能描述：本例介绍各种应用登录页面。全屏登录页面：在主页面点击跳转到全屏登录页后，显示全屏模态页面，全屏模态页面从下方滑出并覆盖整个屏幕，模态页面内容自定义，此处分为默认一键登录方式和其他登录方式。\n       * 参数介绍：无\n       * README：https://gitee.com/fanjiaojiaoar/cases/blob/master/CommonAppDevelopment/feature/modalwindow/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "图片九宫格封装案例",
            "id": "75",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/images_aligned.gif",
            "description": "本示例介绍使用Flex组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/imagegridlayout/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ImageGridLayoutComponent()",
              "importCode": "import { ImageGridLayoutComponent } from 'imagegridlayout';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用Flex组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagegridlayout/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "tabContent内容可以在tabBar上显示并响应滑动事件案例",
            "id": "99",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/tabcontentoverflow.gif",
            "description": "本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/tabcontentoverflow/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "TabContentOverFlowComponent()",
              "importCode": "import { TabContentOverFlowComponent } from 'tabcontentoverflow';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用Flex组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/tabcontentoverflow/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "纵向横向列表联动案例",
            "id": "142",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/vertical_horizontal_linkage.gif",
            "description": "本示例主要通过List组件绑定Scroller滚动控制器和LazyForEach数据懒加载来实现纵向横向列表联动。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/verticalhorizontallinkage/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "VerticalAndHorizontalListComponent()",
              "importCode": "import { VerticalAndHorizontalListComponent } from 'verticalhorizontallinkage';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要通过List组件绑定Scroller滚动控制器和LazyForEach数据懒加载来实现纵向横向列表联动。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/verticalhorizontallinkage/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "textOverflow长文本省略",
            "id": "115",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/text_overflow.gif",
            "description": "本示例实现了回复评论时，当回复人的昵称与被回复人的昵称长度都过长时，使用textOverflow和maxLines()实现昵称的长文本省略展示的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/textoverflow/",
              "caseRepositoriesInfo": "",
              "insertCode": "TextOverflowPageComponent()",
              "importCode": "import { TextOverflowPageComponent } from 'textoverflow';",
              "codeAnnotation": "/**\n       * 功能描述：本示例实现了回复评论时，当回复人的昵称与被回复人的昵称长度都过长时，使用textOverflow和maxLines()实现昵称的长文本省略展示的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/textoverflow/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Canvas实现模拟时钟案例",
            "id": "96",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/canvas_clock.gif",
            "description": "本示例介绍利用Canvas和定时器setInterval实现模拟时钟功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/analogclock/",
              "caseRepositoriesInfo": "",
              "insertCode": "AnalogClockComponent()",
              "importCode": "import { AnalogClockComponent } from 'analogclock';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍利用Canvas和定时器setInterval实现模拟时钟功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/analogclock/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Tab组件实现增删Tab标签",
            "id": "13",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/handle_tabs.gif",
            "description": "本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/handletabs/",
              "caseRepositoriesInfo": "",
              "insertCode": "HandleTabsComponent()",
              "importCode": "import { HandleTabsComponent } from 'handletabs';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用了Tab组件实现自定义增删Tab页签的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/handletabs/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "骨架屏实现案例",
            "id": "129",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/skeleton_diagram.gif",
            "description": "提供一个在页面数据加载完成前，先给用户展示出页面的大致结构的骨架屏（通常以灰色或其他浅色系的占位图形式呈现），待接口数据加载完成后，再渲染出实际页面内容并替换掉骨架屏，以此来提升加载时用户体验的骨架屏功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/skeletondiagram/",
              "caseRepositoriesInfo": "",
              "insertCode": "SkeletonDiagramComponent()",
              "importCode": "import { SkeletonDiagramComponent } from 'skeletondiagram';",
              "codeAnnotation": "/**\n       * 功能描述：提供一个在页面数据加载完成前，先给用户展示出页面的大致结构的骨架屏（通常以灰色或其他浅色系的占位图形式呈现），待接口数据加载完成后，再渲染出实际页面内容并替换掉骨架屏，以此来提升加载时用户体验的骨架屏功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/skeletondiagram/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "自定义TabBar页签凸起和凹陷案例",
            "id": "140",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_draw_tabbar.gif",
            "description": "通过canvas，clipShape，radialGradient实现自定义TabBar选择时凸起点交界处的圆滑过渡动效以及扩展了一个凹陷选择时不遮挡原本内容的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/customdrawtabbar/",
              "caseRepositoriesInfo": "",
              "insertCode": "CustomDrawTabbarComponent()",
              "importCode": "import { CustomDrawTabbarComponent } from 'customdrawtabbar';",
              "codeAnnotation": "/**\n       * 功能描述：通过canvas，clipShape，radialGradient实现自定义TabBar选择时凸起点交界处的圆滑过渡动效以及扩展了一个凹陷选择时不遮挡原本内容的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customdrawtabbar/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "日历切换案例",
            "id": "132",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/calendar_switch.gif",
            "description": "本示例主要介绍如何使用自定义日历组件CustomCalendar实现日历年视图，月视图，周视图以及视图切换功能。还有使用Calendar Kit日历服务实现日程提醒的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/calendarswitch/",
              "caseRepositoriesInfo": "",
              "insertCode": "CustomCalendarSamplePage()",
              "importCode": "import { CustomCalendarSamplePage } from 'calendarswitch';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍如何使用自定义日历组件CustomCalendar实现日历年视图，月视图，周视图以及视图切换功能。还有使用Calendar Kit日历服务实现日程提醒的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/calendarswitch/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "适配挖孔屏案例",
            "id": "60",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/digging_hole_screen.gif",
            "description": "本示例介绍使用屏幕属性getDefaultDisplaySync、getCutoutInfo接口实现适配挖孔屏。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/diggingholescreen/",
              "caseRepositoriesInfo": "",
              "insertCode": "DiggingHoleScreenComponent()",
              "importCode": "import { DiggingHoleScreenComponent } from 'diggingholescreen';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用屏幕属性getDefaultDisplaySync、getCutoutInfo接口实现适配挖孔屏。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/diggingholescreen/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "滚动吸顶效果实现案例",
            "id": "33",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/component_stack.gif",
            "description": "本示例介绍运用Stack组件以构建多层次堆叠的视觉效果。通过绑定Scroll组件的onScroll滚动事件回调函数，精准捕获滚动动作的发生。当滚动时，实时地调节组件的透明度、高度等属性，从而成功实现了嵌套滚动效果、透明度动态变化以及平滑的组件切换。其中，搜索框能够实现“吸顶”效果，在用户滚动页面时始终保持在顶部。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/componentstack/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ComponentStackComponent()",
              "importCode": "import { ComponentStackComponent } from 'componentstack';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍运用Stack组件以构建多层次堆叠的视觉效果。通过绑定Scroll组件的onScroll滚动事件回调函数，精准捕获滚动动作的发生。当滚动时，实时地调节组件的透明度、高度等属性，从而成功实现了嵌套滚动效果、透明度动态变化以及平滑的组件切换。其中，搜索框能够实现“吸顶”效果，在用户滚动页面时始终保持在顶部。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/componentstack/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Scroll容器嵌套多种组件事件处理案例",
            "id": "157",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/container_nested_slide.gif",
            "description": "本示例主要介绍了由父组件Scroll统一计算派发偏移量，从而达到子组件web的滚动和list组件滚动能无缝衔接，像同一个滚动组件滑动效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/containernestedslide/",
              "caseRepositoriesInfo": "",
              "insertCode": "NewsDetailPage()",
              "importCode": "import { NewsDetailPage } from 'containernestedslide';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍了由父组件Scroll统一计算派发偏移量，从而达到子组件web的滚动和list组件滚动能无缝衔接，像同一个滚动组件滑动效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/containernestedslide/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "二级联动",
            "id": "10",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/secondary_linkage.gif",
            "description": "本示例主要介绍了List组件实现二级联动（Cascading List）的场景。 该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/secondarylinkage/",
              "caseRepositoriesInfo": "",
              "insertCode": "SecondaryLinkExample()",
              "importCode": "import { SecondaryLinkExample } from 'secondarylinkage';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍了List组件实现二级联动（Cascading List）的场景。 该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/secondarylinkage/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "编辑收货地址案例",
            "id": "139",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/edit_address.gif",
            "description": "本示例多用于表单填写场景：其中通过使用TextPicker滑动选择文本内容组件实现三级联动选择省市区，并回填到输入框。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/editaddress/",
              "caseRepositoriesInfo": "",
              "insertCode": "EditAddressView()",
              "importCode": "import { EditAddressView } from 'editaddress';",
              "codeAnnotation": "/**\n       * 功能描述：本示例多用于表单填写场景：其中通过使用TextPicker滑动选择文本内容组件实现三级联动选择省市区，并回填到输入框。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/editaddress/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "组件随软键盘弹出避让案例",
            "id": "152",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/keyboard_avoid.gif",
            "description": "本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/keyboardavoid/",
              "caseRepositoriesInfo": "",
              "insertCode": "KeyboardAvoid()",
              "importCode": "import { KeyboardAvoid } from 'keyboardavoid';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/keyboardavoid/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "图形锁屏案例",
            "id": "153",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/pattern_lock.gif",
            "description": "本示例介绍使用图案密码锁组件与振动接口实现图形锁屏场景。该场景多用于桌面及系统类应用。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/patternlock/",
              "caseRepositoriesInfo": "",
              "insertCode": "PatternLockMainPage()",
              "importCode": "import { PatternLockMainPage } from 'patternlock';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用图案密码锁组件与振动接口实现图形锁屏场景。该场景多用于桌面及系统类应用。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/patternlock/README.md\n       */",
              "napi": false
            }
          }
        ]
      },
      {
        "typeInfo": {
          "typeName": "animation",
          "typeDesc": "动效",
          "typeDetail": ""
        },
        "repositoriesInfoList": [
          {
            "name": "听歌识曲水波纹特效案例",
            "id": "35",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/water_ripples.gif",
            "description": "本示例介绍在很多应用中，会出现点击按钮出现水波纹的特效。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/waterripples/",
              "caseRepositoriesInfo": "",
              "insertCode": "WaterRipplesComponent()",
              "importCode": "import { WaterRipplesComponent } from 'waterripples';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍在很多应用中，会出现点击按钮出现水波纹的特效。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/waterripples/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "使用弹簧曲线实现抖动动画及手机振动效果案例",
            "id": "24",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/vibrate_effect.gif",
            "description": "本示例介绍使用vibrator.startVibration方法实现手机振动效果，用keyframeAnimateTo关键帧动画实现点击后的抖动动画。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/vibrateeffect/",
              "caseRepositoriesInfo": "",
              "insertCode": "VibrateEffectViewComponent()",
              "importCode": "import { VibrateEffectViewComponent } from 'vibrateeffect';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用vibrator.startVibration方法实现手机振动效果，用keyframeAnimateTo关键帧动画实现点击后的抖动动画。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/vibrateeffect/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "长列表滑动到指定列表项动效实现案例",
            "id": "48",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/list_slide_to_history.gif",
            "description": "在长列表场景时，当用户在浏览过程中打断时，列表会从第一项开始重新加载，此时我们使用scrollToIndex跳转到某个列表项时，当开启smooth动效时，会对经过的所有item进行加载和布局计算，当大量加载item时会导致性能问题，影响用户体验。因此我们使用currentOffset方法获取并记录偏移量，然后使用scrollTo方法跳转到上次浏览记录功能，可以流畅滑动到上次列表的位置。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/listslidetohistory/",
              "caseRepositoriesInfo": "",
              "insertCode": "ListSlideToHistoryComponent()",
              "importCode": "import { ListSlideToHistoryComponent } from 'listslidetohistory';",
              "codeAnnotation": "/**\n       * 功能描述：在长列表场景时，当用户在浏览过程中打断时，列表会从第一项开始重新加载，此时我们使用scrollToIndex跳转到某个列表项时，当开启smooth动效时，会对经过的所有item进行加载和布局计算，当大量加载item时会导致性能问题，影响用户体验。因此我们使用currentOffset方法获取并记录偏移量，然后使用scrollTo方法跳转到上次浏览记录功能，可以流畅滑动到上次列表的位置。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/listslidetohistory/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "下拉刷新与上滑加载案例",
            "id": "20",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/pull_to_refresh_news.gif",
            "description": "本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/pulltorefreshnews/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "PullToRefreshNewsComponent()",
              "importCode": "import { PullToRefreshNewsComponent } from 'pulltorefreshnews';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pulltorefreshnews/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "地址交换动画",
            "id": "1",
            "image": "https://gitee.com/sephyrothcloud/cases_0628/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/address_exchange.gif",
            "description": "本示例介绍使用显式动画 animateTo 实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/addressexchange/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "AddressExchangeViewComponent()",
              "importCode": "import { AddressExchangeViewComponent } from 'addressexchange';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用显式动画 animateTo 实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/addressexchange/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Swiper高度可变化效果实现",
            "id": "36",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/swiper_smooth_variation.gif",
            "description": "在很多应用中，swiper组件每一个page的高度是不一致的，所以需要swiper组件下方页面的高度跟着一起变化。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/swipersmoothvariation/",
              "caseRepositoriesInfo": "",
              "insertCode": "SwiperSmoothVariationComponent()",
              "importCode": "import { SwiperSmoothVariationComponent } from 'swipersmoothvariation';",
              "codeAnnotation": "/**\n       * 功能描述：在很多应用中，swiper组件每一个page的高度是不一致的，所以需要swiper组件下方页面的高度跟着一起变化。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/swipersmoothvariation/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "翻页动效案例",
            "id": "21",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/page_turning_animation.gif",
            "description": "翻页动效是应用开发中常见的动效场景，常见的有书籍翻页，日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口animateTo实现翻页的效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/pageturninganimation/",
              "caseRepositoriesInfo": "",
              "insertCode": "PageTurningAnimationComponent()",
              "importCode": "import { PageTurningAnimationComponent } from 'pageturninganimation';",
              "codeAnnotation": "/**\n       * 功能描述：翻页动效是应用开发中常见的动效场景，常见的有书籍翻页，日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口animateTo实现翻页的效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pageturninganimation/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "自定义Swiper卡片预览效果实现",
            "id": "80",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/card_swiper_animation.gif",
            "description": "本方案做的是采用Swiper组件实现容器视图居中完全展示，两边等长露出，并且跟手滑动缩放效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/cardswiperanimation/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "CardSwiperAnimationComponent()",
              "importCode": "import { CardSwiperAnimationComponent } from 'cardswiperanimation';",
              "codeAnnotation": "/**\n       * 功能描述：本方案做的是采用Swiper组件实现容器视图居中完全展示，两边等长露出，并且跟手滑动缩放效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/cardswiperanimation/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Grid和List内拖拽交换子组件位置",
            "id": "95",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/drag_and_exchange.gif",
            "description": "本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。\n\n此案例目前已有动效升级版，请参考：列表项交换案例、网格元素交换案例。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/dragandexchange/",
              "caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
              "insertCode": "Launcher()",
              "importCode": "import { Launcher } from 'dragandexchange';",
              "codeAnnotation": "/**\n       * 功能描述：本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。\n\n此案例目前已有动效升级版，请参考：列表项交换案例、网格元素交换案例。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/dragandexchange/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "悬浮窗拖拽和吸附动画",
            "id": "93",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/float_window.gif",
            "description": "本示例使用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/floatwindow/",
              "caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
              "insertCode": "FloatWindowMainPage()",
              "importCode": "import { FloatWindowMainPage } from 'floatwindow';",
              "codeAnnotation": "/**\n       * 功能描述：本示例使用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/floatwindow/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "语音录制和声音动效实现",
            "id": "90",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/normal_AV_record2.gif",
            "description": "本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/voicerecordynamiceffect/",
              "caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
              "insertCode": "GestureGroupExample()",
              "importCode": "import { GestureGroupExample } from 'voicerecordynamiceffect';",
              "codeAnnotation": "/**\n       * 功能描述：本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/voicerecordynamiceffect/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "列表项交换案例",
            "id": "88",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/list_exchange.gif",
            "description": "本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/listexchange/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ListExchangeViewComponent()",
              "importCode": "import { ListExchangeViewComponent } from 'listexchange';",
              "codeAnnotation": "/**\n       * 功能描述：本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/listexchange/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "使用绘制组件实现自定义进度动画",
            "id": "46",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/paint_component.gif",
            "description": "本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。该场景多用于手机电池电量、汽车油量、水位变化等动态变化中。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/paintcomponent/",
              "caseRepositoriesInfo": "",
              "insertCode": "PaintComponentComponent()",
              "importCode": "import { PaintComponentComponent } from 'paintcomponent';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。该场景多用于手机电池电量、汽车油量、水位变化等动态变化中。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/paintcomponent/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "滑动页面信息隐藏与组件位移效果案例",
            "id": "5",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/slide_to_hide_and_displace.gif",
            "description": "在很多应用中，向上滑动\"我的\"页面，页面顶部会有如下变化效果：一部分信息逐渐隐藏，另一部分信息逐渐显示，同时一些组件会进行缩放或者位置移动。向下滑动时则相反。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/slidetohideanddisplace/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "SlideToHideAndDisplaceComponent()",
              "importCode": "import { SlideToHideAndDisplaceComponent } from 'slidetohideanddisplace';",
              "codeAnnotation": "/**\n       * 功能描述：在很多应用中，向上滑动\"我的\"页面，页面顶部会有如下变化效果：一部分信息逐渐隐藏，另一部分信息逐渐显示，同时一些组件会进行缩放或者位置移动。向下滑动时则相反。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/slidetohideanddisplace/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "网格元素交换案例",
            "id": "105",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/grid_exchange.gif",
            "description": "直接进行交换和删除元素会给用户带来不好的体验效果，因此需要在此过程中注入一些特色的动画来提升体验效果，本案例通过Grid组件、attributeModifier、以 及animateTo函数实现了拖拽动画和删除动画。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/gridexchange/",
              "caseRepositoriesInfo": "",
              "insertCode": "GridExchangeComponent()",
              "importCode": "import { GridExchangeComponent } from 'gridexchange';",
              "codeAnnotation": "/**\n       * 功能描述：直接进行交换和删除元素会给用户带来不好的体验效果，因此需要在此过程中注入一些特色的动画来提升体验效果，本案例通过Grid组件、attributeModifier、以 及animateTo函数实现了拖拽动画和删除动画。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/gridexchange/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "数字滚动动效实现",
            "id": "50",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/number_scroll.gif",
            "description": "本示例主要介绍了数字滚动动效的实现方案。 该方案多用于数字刷新，例如页面刷新抢票数量等场景。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/digitalscrollanimation/",
              "caseRepositoriesInfo": "",
              "insertCode": "DigitalScrollExampleComponent()",
              "importCode": "import { DigitalScrollExampleComponent } from 'digitalscrollanimation';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍了数字滚动动效的实现方案。 该方案多用于数字刷新，例如页面刷新抢票数量等场景。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/digitalscrollanimation/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "视频横竖屏切换及进度条热区拖动案例",
            "id": "138",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/video_screen_direction_switching.gif",
            "description": "本示例介绍了@ohos.multimedia.media组件和@ohos.window接口以及使用触摸热区实现视频横竖屏切换及进度条热区拖动的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/videoscreendirectionswitching/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "VideoScreenDirectionSwitchingComponent()",
              "importCode": "import { VideoScreenDirectionSwitchingComponent } from 'videoscreendirectionswitching';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍了@ohos.multimedia.media组件和@ohos.window接口以及使用触摸热区实现视频横竖屏切换及进度条热区拖动的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/videoscreendirectionswitching/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "SideBarContainer侧边栏淡入淡出动效实现案例",
            "id": "43",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/side_bar_animation.gif",
            "description": "在2in1或平板上，群聊侧边栏是一种较为常用的功能，虽然HarmonyOS已经具备了基本的动效，但是部分情况下开发者可能有定制侧边栏动效的需求，本例主要介绍了如何基于显式动画实现侧边栏的淡入淡出动效。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/sidebaranimation/",
              "caseRepositoriesInfo": "",
              "insertCode": "SideBarAnimationViewComponent()",
              "importCode": "import { SideBarAnimationViewComponent } from 'sidebaranimation';",
              "codeAnnotation": "/**\n       * 功能描述：在2in1或平板上，群聊侧边栏是一种较为常用的功能，虽然HarmonyOS已经具备了基本的动效，但是部分情况下开发者可能有定制侧边栏动效的需求，本例主要介绍了如何基于显式动画实现侧边栏的淡入淡出动效。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/sidebaranimation/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "文本选择菜单案例",
            "id": "160",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/select_text_menu.gif",
            "description": "本案例拓展富文本组件文字选择菜单选项，通过富文本组件editMenuOptions属性添加自定义选择菜单，在编辑文字时选择更多选项打开额外菜单栏。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/selecttextmenu/",
              "caseRepositoriesInfo": "",
              "insertCode": "SelectTextMenuComponent()",
              "importCode": "import { SelectTextMenuComponent } from 'selecttextmenu';",
              "codeAnnotation": "/**\n       * 功能描述：本案例拓展富文本组件文字选择菜单选项，通过富文本组件editMenuOptions属性添加自定义选择菜单，在编辑文字时选择更多选项打开额外菜单栏。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/selecttextmenu/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "跑马灯案例",
            "id": "19",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/marquee.gif",
            "description": "本示例介绍了文本宽度过宽时，如何实现文本首尾相接循环滚动并显示在可视区，以及每循环滚动一次之后会停滞一段时间后再滚动。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/marquee/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "MarqueeViewComponent()",
              "importCode": "import { MarqueeViewComponent } from 'marquee';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍了文本宽度过宽时，如何实现文本首尾相接循环滚动并显示在可视区，以及每循环滚动一次之后会停滞一段时间后再滚动。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/marquee/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "投票动效实现案例",
            "id": "57",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/voting_component.gif",
            "description": "本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/votingcomponent/",
              "caseRepositoriesInfo": "",
              "insertCode": "VotingViewComponent()",
              "importCode": "import { VotingViewComponent } from 'votingcomponent';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/votingcomponent/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "视频全屏切换案例",
            "id": "28",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/media_fullscreen.gif",
            "description": "本示例介绍了使用@ohos.multimedia.media接口和@ohos.window接口配合XComponent组件实现媒体全屏的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/mediafullscreen/",
              "caseRepositoriesInfo": "",
              "insertCode": "MediaFullScreenComponent()",
              "importCode": "import { MediaFullScreenComponent } from 'mediafullscreen';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍了使用@ohos.multimedia.media接口和@ohos.window接口配合XComponent组件实现媒体全屏的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/mediafullscreen/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "阅读翻页方式案例",
            "id": "91",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/page_flip.gif",
            "description": "本示例展示手机阅读时左右翻页，上下翻页，覆盖翻页的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/pageflip/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "PageFlipComponent()",
              "importCode": "import { PageFlipComponent } from 'pageflip';",
              "codeAnnotation": "/**\n       * 功能描述：本示例展示手机阅读时左右翻页，上下翻页，覆盖翻页的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pageflip/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "状态栏动画实现案例",
            "id": "141",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/status_bar_animation.gif",
            "description": "本案例展示了状态栏的动态交互效果。通过监听页面滚动事件 onDidScroll，随着页面的上下滚动，实现状态栏颜色的变化。搜索框会在滚动时流畅地展开或收起，并伴有自然的透明度过渡效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/statusbaranimation/",
              "caseRepositoriesInfo": "",
              "insertCode": "StatusBarAnimationComponent()",
              "importCode": "import { StatusBarAnimationComponent } from 'statusbaranimation';",
              "codeAnnotation": "/**\n       * 功能描述：本案例展示了状态栏的动态交互效果。通过监听页面滚动事件 onDidScroll，随着页面的上下滚动，实现状态栏颜色的变化。搜索框会在滚动时流畅地展开或收起，并伴有自然的透明度过渡效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/statusbaranimation/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "边框或背景图片拉伸案例",
            "id": "113",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_resizable.png",
            "description": "HarmonyOS上不支持.9资源文件进行安全拉伸。 作为替代方案，本案例中商城页面的促销标签边框使用同一张图片资源，通过设置图片的resizable属性，展示不同长度的促销标签效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/imageresizable/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ProductWaterFlowPageComponent()",
              "importCode": "import { ProductWaterFlowPageComponent } from 'imageresizable';",
              "codeAnnotation": "/**\n       * 功能描述：HarmonyOS上不支持.9资源文件进行安全拉伸。 作为替代方案，本案例中商城页面的促销标签边框使用同一张图片资源，通过设置图片的resizable属性，展示不同长度的促销标签效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imageresizable/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "页面加载效果实现案例",
            "id": "42",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/page_loading.gif",
            "description": "本示例介绍Stack堆叠组件和LoadingProgress加载组件模拟首次进入页面实现页面加载的效果。加载完成后，LoadingProgress组件会消失并展示加载结果页（即商品页）。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/pageloading/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "PageLoadingComponent()",
              "importCode": "import { PageLoadingComponent } from 'pageloading';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍Stack堆叠组件和LoadingProgress加载组件模拟首次进入页面实现页面加载的效果。加载完成后，LoadingProgress组件会消失并展示加载结果页（即商品页）。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pageloading/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "搜索框热搜词自动滚动",
            "id": "120",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/search_swiper.gif",
            "description": "本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/searchswiper/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "SearchSwiperComponent()",
              "importCode": "import { SearchSwiperComponent } from 'searchswiper';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/searchswiper/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "边缘渐变实现",
            "id": "116",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/fading_edge.gif",
            "description": "本案例介绍组件内容边缘渐变的实现，通常用于提示长列表滑动到边缘的场景。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/fadingedge/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "FadingEdgeComponent()",
              "importCode": "import { FadingEdgeComponent } from 'fadingedge';",
              "codeAnnotation": "/**\n       * 功能描述：本案例介绍组件内容边缘渐变的实现，通常用于提示长列表滑动到边缘的场景。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/fadingedge/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "状态栏显隐变化",
            "id": "25",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/navigation_bar_change.gif",
            "description": "本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化。该场景多用于各种软件的首页、我的等页面中。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/navigationbarchange/",
              "caseRepositoriesInfo": "",
              "insertCode": "NavigationBarChangeView()",
              "importCode": "import { NavigationBarChangeView } from 'navigationbarchange';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化。该场景多用于各种软件的首页、我的等页面中。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/navigationbarchange/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "页面转场一镜到底动画",
            "id": "68",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/transition_animation.gif",
            "description": "本方案做的是页面点击卡片跳转到详情预览的转场动画效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/transitionanimation/",
              "caseRepositoriesInfo": "",
              "insertCode": "TransitionAnimationPage()",
              "importCode": "import { TransitionAnimationPage } from 'transitionanimation';",
              "codeAnnotation": "/**\n       * 功能描述：本方案做的是页面点击卡片跳转到详情预览的转场动画效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/transitionanimation/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "首页下拉进入二楼效果案例",
            "id": "108",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/second_floor_load_animation.gif",
            "description": "本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉浸式（全屏）显示。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/secondfloorloadanimation/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "SecondFloorLoadAnimationComponent()",
              "importCode": "import { SecondFloorLoadAnimationComponent } from 'secondfloorloadanimation';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉浸式（全屏）显示。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/secondfloorloadanimation/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "自定义地址选择案例",
            "id": "166",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_address_picker.gif",
            "description": "本示例介绍如何使用bindSheet，changeIndex，onAreaChange实现带切换动效的自定义地址选择组件。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/customaddresspicker/",
              "caseRepositoriesInfo": "",
              "insertCode": "AddressPickerSamplePage()",
              "importCode": "import { AddressPickerSamplePage } from 'customaddresspicker';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍如何使用bindSheet，changeIndex，onAreaChange实现带切换动效的自定义地址选择组件。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customaddresspicker/README.md\n       */",
              "napi": false
            }
          }
        ]
      },
      {
        "typeInfo": {
          "typeName": "native",
          "typeDesc": "Native",
          "typeDetail": ""
        },
        "repositoriesInfoList": [
          {
            "name": "Native保存图片到应用沙箱",
            "id": "41",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/native_image2sandbox.gif",
            "description": "本示例主要介绍Native如何将网络上的图片及Rawfile中的图片保存到应用沙箱中。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/nativesavepictosandbox/",
              "caseRepositoriesInfo": "",
              "insertCode": "NativePictureToSandboxViewComponent()",
              "importCode": "import { NativePictureToSandboxViewComponent } from 'nativesavepictosandbox';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍Native如何将网络上的图片及Rawfile中的图片保存到应用沙箱中。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/nativesavepictosandbox/README.md\n       */",
              "napi": true
            }
          },
          {
            "name": "在Native侧实现进度通知功能",
            "id": "22",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/native_progress_notify.gif",
            "description": "本示例介绍如何通过自定义native侧下载方法startDownload将Native的进度信息实时同步到ArkTS侧的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/nativeprogressnotify/",
              "caseRepositoriesInfo": "",
              "insertCode": "NativeProgressNotifyComponent()",
              "importCode": "import { NativeProgressNotifyComponent } from 'nativeprogressnotify';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍如何通过自定义native侧下载方法startDownload将Native的进度信息实时同步到ArkTS侧的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/nativeprogressnotify/README.md\n       */",
              "napi": true
            }
          },
          {
            "name": "XComponent + Vsync 实现自定义动画",
            "id": "97",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/xcomponent_vsync.gif",
            "description": "XComponent 提供了应用在 native 侧调用 OpenGLES 图形接口的能力，本文主要介绍如何配合 Vsync 事件，完成自定义动画。在这种实现方式下，自定义动画的绘制不在 UI 主线程中完成，即使主线程卡顿，动画效果也不会受影响。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/xcomponentvsync/",
              "caseRepositoriesInfo": "",
              "insertCode": "XcomponentVsyncComponent()",
              "importCode": "import { XcomponentVsyncComponent } from 'xcomponentvsync';",
              "codeAnnotation": "/**\n       * 功能描述： XComponent 提供了应用在 native 侧调用 OpenGLES 图形接口的能力，本文主要介绍如何配合 Vsync 事件，完成自定义动画。在这种实现方式下，自定义动画的绘制不在 UI 主线程中完成，即使主线程卡顿，动画效果也不会受影响。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/xcomponentvsync/README.md\n       */",
              "napi": true
            }
          }
        ]
      },
      {
        "typeInfo": {
          "typeName": "library",
          "typeDesc": "三方库",
          "typeDetail": ""
        },
        "repositoriesInfoList": [
          {
            "name": "配置ImageKnife请求头实现防盗链功能",
            "id": "71",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_theft.gif",
            "description": "使用第三方库imageknife，通过在请求头中添加Referer来实现防盗链图片的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/imagetheft/",
              "caseRepositoriesInfo": "",
              "insertCode": "ImageTheftComponent()",
              "importCode": "import { ImageTheftComponent } from 'imagetheft';",
              "codeAnnotation": "/**\n       * 功能描述：使用第三方库imageknife，通过在请求头中添加Referer来实现防盗链图片的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagetheft/README.md\n       */",
              "napi": false
            }
          }
        ]
      },
      {
        "typeInfo": {
          "typeName": "performance",
          "typeDesc": "性能示例",
          "typeDetail": ""
        },
        "repositoriesInfoList": [
          {
            "name": "全局自定义组件复用实现案例",
            "id": "125",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/custom_reusable_pool.gif",
            "description": "本示例是全局自定义组件复用实现的示例代码，主要讲解如何通过BuilderNode创建全局的自定义组件复用池，实现跨页面的组件复用。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/perfermance/customreusablepool/",
              "caseRepositoriesInfo": "",
              "insertCode": "BuilderNodePoolDemoComponent()",
              "importCode": "import { BuilderNodePoolDemoComponent } from 'customreusablepool';",
              "codeAnnotation": "/**\n       * 功能描述：本示例是全局自定义组件复用实现的示例代码，主要讲解如何通过BuilderNode创建全局的自定义组件复用池，实现跨页面的组件复用。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/perfermance/customreusablepool/README.md\n       */",
              "napi": false
            }
          }
        ]
      },
      {
        "typeInfo": {
          "typeName": "other",
          "typeDesc": "其他",
          "typeDetail": ""
        },
        "repositoriesInfoList": [
          {
            "name": "数据库版本升级案例",
            "id": "74",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/database_upgrade.gif",
            "description": "本示例介绍使用关系型数据库的接口来进行数据库升降级场景实现",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/databaseupgrade/",
              "caseRepositoriesInfo": "",
              "insertCode": "DatabaseUpgradeComponent()",
              "importCode": "import { DatabaseUpgradeComponent } from 'databaseupgrade';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用关系型数据库的接口来进行数据库升降级场景实现\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/databaseupgrade/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "多文件下载监听案例",
            "id": "62",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/multiple_files_download.gif",
            "description": "多文件下载监听在应用开发中是一个非常常见的需求。本示例将介绍如何使用request上传下载模块实现多文件下载监听，如监听每个文件下载任务的进度，任务暂停，下载完成等下载情况。每个应用最多支持创建10个未完成的任务，相关规格说明请参考request.agent.create。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/multiplefilesdownload/",
              "caseRepositoriesInfo": "",
              "insertCode": "MultipleFilesDownloadComponent()",
              "importCode": "import { MultipleFilesDownloadComponent } from 'multiplefilesdownload';",
              "codeAnnotation": "/**\n       * 功能描述：多文件下载监听在应用开发中是一个非常常见的需求。本示例将介绍如何使用request上传下载模块实现多文件下载监听，如监听每个文件下载任务的进度，任务暂停，下载完成等下载情况。每个应用最多支持创建10个未完成的任务，相关规格说明请参考request.agent.create。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/multiplefilesdownload/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "图片选择和下载保存案例",
            "id": "16",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/photo_pick_and_save.gif",
            "description": "本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/photopickandsave/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "PictureManagerComponent()",
              "importCode": "import { PictureManagerComponent } from 'photopickandsave';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍图片相关场景的使用：包含访问手机相册图片、选择预览图片并显示选择的图片到当前页面，下载并保存网络图片到手机相册或到指定用户目录两个场景。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/photopickandsave/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "图片压缩方案",
            "id": "45",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_compression.gif",
            "description": "图片压缩在应用开发中是一个非常常见的需求，比如在处理用户上传图片时，需要上传指定大小以内的图片。目前图片压缩支持jpeg、webp、png格式。本例将介绍如何通过packing和scale实现图片压缩（如自动压缩到目标大小以内，手动调整图片质量和尺寸进行压缩等），以及把图片压缩成不同格式后保存到图库。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/imagecompression/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ImageCompressionComponent()",
              "importCode": "import { ImageCompressionComponent } from 'imagecompression';",
              "codeAnnotation": "/**\n       * 功能描述：图片压缩在应用开发中是一个非常常见的需求，比如在处理用户上传图片时，需要上传指定大小以内的图片。目前图片压缩支持jpeg、webp、png格式。本例将介绍如何通过packing和scale实现图片压缩（如自动压缩到目标大小以内，手动调整图片质量和尺寸进行压缩等），以及把图片压缩成不同格式后保存到图库。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagecompression/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "图片缩放效果实现",
            "id": "7",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/picturepreview_example.gif",
            "description": "图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/imageviewer/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "PicturePreviewSample()",
              "importCode": "import { PicturePreviewSample } from 'imageviewer';",
              "codeAnnotation": "/**\n       * 功能描述：图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imageviewer/README_PREVIEW_IMAGE.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Worker子线程中解压文件",
            "id": "31",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/decompress_file.gif",
            "description": "本示例介绍在Worker 子线程使用@ohos.zlib 提供的zlib.decompressfile接口对沙箱目录中的压缩文件进行解压操作，解压成功后将解压路径返回主线程，获取解压文件列表。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/decompressfile/",
              "caseRepositoriesInfo": "",
              "insertCode": "DecompressFileViewComponent()",
              "importCode": "import { DecompressFileViewComponent } from 'decompressfile';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍在Worker 子线程使用@ohos.zlib 提供的zlib.decompressfile接口对沙箱目录中的压缩文件进行解压操作，解压成功后将解压路径返回主线程，获取解压文件列表。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/decompressfile/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Web组件预览PDF文件实现案例",
            "id": "79",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_pdf_viewer.gif",
            "description": "本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件，代码为Tabs容器组件包含了两个独立的TabContent子组件，分别标示为预览本地PDF文件和预览网络PDF文件。每个子组件内部构建一个Web组件。第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源；第二个Web组件则通过配置网络链接属性，实现从互联网加载并预览远程PDF文件内容。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/webpdfviewer/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "WebPDFViewerComponent()",
              "importCode": "import { WebPDFViewerComponent } from 'webpdfviewer';",
              "codeAnnotation": "/**\n       * 功能描述：本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件，代码为Tabs容器组件包含了两个独立的TabContent子组件，分别标示为预览本地PDF文件和预览网络PDF文件。每个子组件内部构建一个Web组件。第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源；第二个Web组件则通过配置网络链接属性，实现从互联网加载并预览远程PDF文件内容。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webpdfviewer/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "表情聊天案例",
            "id": "102",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/chat_with_expression.gif",
            "description": "本示例主要介绍如何在聊天信息中加入表情图片。通过变量控制表情键盘的显示与否，使用RichEdit接收所选表情的ImageSpan。在发送信息时将图片和文字消息分别通过ImageSpan、Span加入到消息列表中，显示的时候将消息列表中的ImageSpan、Span包裹在Text中进行显示，同时实现了最近使用表情和长按表情图片弹窗显示表情明细的效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/chatwithexpression/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ChatWithExpressionComponent()",
              "importCode": "import { ChatWithExpressionComponent } from 'chatwithexpression';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍如何在聊天信息中加入表情图片。通过变量控制表情键盘的显示与否，使用RichEdit接收所选表情的ImageSpan。在发送信息时将图片和文字消息分别通过ImageSpan、Span加入到消息列表中，显示的时候将消息列表中的ImageSpan、Span包裹在Text中进行显示，同时实现了最近使用表情和长按表情图片弹窗显示表情明细的效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/chatwithexpression/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Web获取相机拍照图片案例",
            "id": "52",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_get_camera_image.gif",
            "description": "本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/webgetcameraimage/",
              "caseRepositoriesInfo": "https://gitee.com/zzh78963/cases.git",
              "insertCode": "WebGetCameraImageView()",
              "importCode": "import { WebGetCameraImageView } from 'webgetcameraimage';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webgetcameraimage/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "水印案例",
            "id": "114",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/water_mark.gif",
            "description": "在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/watermark/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "MainViewComponent()",
              "importCode": "import { MainViewComponent } from 'watermark';",
              "codeAnnotation": "/**\n       * 功能描述：在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/watermark/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "根据icon自适应背景颜色",
            "id": "83",
            "image": "https://gitee.com/fanjiaojiaoar/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/icon_main_color.png",
            "description": "本示例将介绍如何根据图片设置自适应的背景色。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/iconmaincolor/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "IconMainColorComponent()",
              "importCode": "import { IconMainColorComponent } from 'iconmaincolor';",
              "codeAnnotation": "/**\n       * 功能描述：本示例将介绍如何根据图片设置自适应的背景色。\n       * 参数介绍：无\n       * README：https://gitee.com/fanjiaojiaoar/cases/blob/master/CommonAppDevelopment/feature/iconmaincolor/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "使用colorPicker实现背景跟随主题颜色转换",
            "id": "85",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/color_picker.gif",
            "description": "本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过swiper组件对图片进行轮播。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/effectkit/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "MainPageComponent()",
              "importCode": "import { MainPageComponent } from 'effectkit';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过swiper组件对图片进行轮播。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/effectkit/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Text实现部分文本高亮和超链接样式",
            "id": "109",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/styled_text.gif",
            "description": "本示例通过自定义Span类型，在Text组件中使用ForEach遍历，根据不同的Span类型生成不同样式和功能的Span组件，实现部分文本高亮和超链接。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/styledtext/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "StyledTextMainPageComponent()",
              "importCode": "import { StyledTextMainPageComponent } from 'styledtext';",
              "codeAnnotation": "/**\n       * 功能描述：本示例通过自定义Span类型，在Text组件中使用ForEach遍历，根据不同的Span类型生成不同样式和功能的Span组件，实现部分文本高亮和超链接。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/styledtext/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "标题下拉缩放案例",
            "id": "47",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/expand_title.gif",
            "description": "本文以备忘录应用为示例，介绍如何在实现标题跟随手势移动并放缩的动效。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/expandtitle/",
              "caseRepositoriesInfo": "",
              "insertCode": "TitleExpansionView()",
              "importCode": "import { TitleExpansionView } from 'expandtitle';",
              "codeAnnotation": "/**\n       * 功能描述：本文以备忘录应用为示例，介绍如何在实现标题跟随手势移动并放缩的动效。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/expandtitle/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "PixelMap深拷贝案例",
            "id": "77",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_depthcopy.gif",
            "description": "本例通过使用PixelMap的readPixelsToBuffer方法来实现深拷贝。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/imagedepthcopy/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ImageDepthCopyComponent()",
              "importCode": "import { ImageDepthCopyComponent } from 'imagedepthcopy';",
              "codeAnnotation": "/**\n       * 功能描述：本例通过使用PixelMap的readPixelsToBuffer方法来实现深拷贝。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagedepthcopy/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "汉字转拼音案例",
            "id": "56",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/Chinese_to_pinyin.gif",
            "description": "本示例介绍使用第三方库的pinyin4js组件实现汉字转大写拼音。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/chinesetopinyin/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ChineseToPinyinComponent()",
              "importCode": "import { ChineseToPinyinComponent } from 'chinesetopinyin';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用第三方库的pinyin4js组件实现汉字转大写拼音。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/chinesetopinyin/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "图片混合案例",
            "id": "107",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/blend_mode.gif",
            "description": "本实例主要通过BlendMode属性来实现挂件和图片的混合，通过更改不同的混合参数，能够展示不同的混合效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/blendmode/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "BlendModeViewComponent()",
              "importCode": "import { BlendModeViewComponent } from 'blendmode';",
              "codeAnnotation": "/**\n       * 功能描述：本实例主要通过BlendMode属性来实现挂件和图片的混合，通过更改不同的混合参数，能够展示不同的混合效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/blendmode/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "图片编辑实现马赛克效果",
            "id": "131",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_mosaic.gif",
            "description": "本实例介绍如何将图片中手指划过的区域分割成若干个大小一致的小方格，并通过createPixelMapSync接口将新的像素点数据写入图片，实现局部马赛克的效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/imagemosaic/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ImageMosaicViewComponent()",
              "importCode": "import { ImageMosaicViewComponent } from 'imagemosaic';",
              "codeAnnotation": "/**\n       * 功能描述：本实例介绍如何将图片中手指划过的区域分割成若干个大小一致的小方格，并通过createPixelMapSync接口将新的像素点数据写入图片，实现局部马赛克的效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagemosaic/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "画笔调色板案例",
            "id": "130",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/palette.gif",
            "description": "本示例实现了一个网格渐变的画笔调色板，能够根据给定的 HSL 类型颜色和色阶数，按亮度生成渐变色，用户可以通过调色板选择颜色并在画布上绘制路径。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/palette/",
              "caseRepositoriesInfo": "",
              "insertCode": "PaletteComponent()",
              "importCode": "import { PaletteComponent } from 'palette';",
              "codeAnnotation": "/**\n       * 功能描述：本示例实现了一个网格渐变的画笔调色板，能够根据给定的 HSL 类型颜色和色阶数，按亮度生成渐变色，用户可以通过调色板选择颜色并在画布上绘制路径。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/palette/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "发布图片评论",
            "id": "29",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_comment.gif",
            "description": "本示例将通过发布图片评论场景，介绍如何使用startAbilityForResult接口拉起相机拍照，并获取相机返回的数据。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/imagecomment/",
              "caseRepositoriesInfo": "",
              "insertCode": "ImageCommentViewComponent()",
              "importCode": "import { ImageCommentViewComponent } from 'imagecomment';",
              "codeAnnotation": "/**\n       * 功能描述：本示例将通过发布图片评论场景，介绍如何使用startAbilityForResult接口拉起相机拍照，并获取相机返回的数据。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imagecomment/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "图片拖拽AI抠图案例",
            "id": "49",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/image_enableanalyzer.gif",
            "description": "本示例介绍图片AI抠图案例的使用：通过Image.enableAnalyzer(true)实现长按图片抠图并拖拽/复制到其他应用中。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/imageenableanalyzer/",
              "caseRepositoriesInfo": "",
              "insertCode": "ImageViewComponent()",
              "importCode": "import { ImageViewComponent } from 'imageenableanalyzer';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍图片AI抠图案例的使用：通过Image.enableAnalyzer(true)实现长按图片抠图并拖拽/复制到其他应用中。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imageenableanalyzer/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "滑动视频自动播放",
            "id": "137",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/video_list_autoplay.gif",
            "description": "利用onScrollIndex获取List显示区域内中间子组件索引值的能力来判断播放，利用懒加载场景会预加载List显示区域外cachedCount的内容的能力来实现视频连续播放的功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/videolistautoplay/",
              "caseRepositoriesInfo": "",
              "insertCode": "VideoListAutoplayComponent()",
              "importCode": "import { VideoListAutoplayComponent } from 'videolistautoplay';",
              "codeAnnotation": "/**\n       * 功能描述：利用onScrollIndex获取List显示区域内中间子组件索引值的能力来判断播放，利用懒加载场景会预加载List显示区域外cachedCount的内容的能力来实现视频连续播放的功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/videolistautoplay/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "文字识别案例",
            "id": "84",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/word_recognition.gif",
            "description": "本示例介绍使用text组件的enableDataDetector属性实现文本特殊文字识别。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/wordrecognition/",
              "caseRepositoriesInfo": "",
              "insertCode": "WordRecognitionComponent()",
              "importCode": "import { WordRecognitionComponent } from 'wordrecognition';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用text组件的enableDataDetector属性实现文本特殊文字识别。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/wordrecognition/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "多层嵌套类对象监听",
            "id": "15",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/variable_watch.gif",
            "description": "本示例介绍使用@Observed装饰器和@ObjectLink装饰器来实现多层嵌套类对象属性变化的监听。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/variablewatch/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "VariableWatchViewComponent()",
              "importCode": "import { VariableWatchViewComponent } from 'variablewatch';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用@Observed装饰器和@ObjectLink装饰器来实现多层嵌套类对象属性变化的监听。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/variablewatch/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Web自定义长按菜单案例",
            "id": "92",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_custom_menu.gif",
            "description": "本示例介绍了给Webview页面中可点击元素（超链接/图片）绑定长按/鼠标右击时的自定义菜单的方案。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/webcustompressmenu/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "WebCustomPressMenuComponent()",
              "importCode": "import { WebCustomPressMenuComponent } from 'webcustompressmenu';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍了给Webview页面中可点击元素（超链接/图片）绑定长按/鼠标右击时的自定义菜单的方案。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webcustompressmenu/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "大文件拷贝案例",
            "id": "53",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/big_file_copy.gif",
            "description": "文件拷贝是应用开发中的一个常见场景，通常有两种方式，一是直接读写文件的全部内容，二是使用buffer多次读写。前者的优点在于使用简单，但是在大文件场景下，内存占用较高，影响应用性能；后者的优点在于内存占用较小，但是编程稍显复杂。本例将展示如何使用buffer来将大文件的rawfile复制到应用沙箱。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/bigfilecopy/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "BigFileCopyViewComponent()",
              "importCode": "import { BigFileCopyViewComponent } from 'bigfilecopy';",
              "codeAnnotation": "/**\n       * 功能描述：文件拷贝是应用开发中的一个常见场景，通常有两种方式，一是直接读写文件的全部内容，二是使用buffer多次读写。前者的优点在于使用简单，但是在大文件场景下，内存占用较高，影响应用性能；后者的优点在于内存占用较小，但是编程稍显复杂。本例将展示如何使用buffer来将大文件的rawfile复制到应用沙箱。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/bigfilecopy/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "应用新功能引导实现案例",
            "id": "73",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/high_light_guide.gif",
            "description": "本文介绍如何使用high_light_guide三方库完成应用新版本功能导航。通过高亮区域与蒙版背景的明暗度对比，让用户快速锁定重点功能，了解版本变更和业务入口。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/highlightguide/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "HighLightGuideMainComponent()",
              "importCode": "import { HighLightGuideMainComponent } from 'highlightguide';",
              "codeAnnotation": "/**\n       * 功能描述：本文介绍如何使用high_light_guide三方库完成应用新版本功能导航。通过高亮区域与蒙版背景的明暗度对比，让用户快速锁定重点功能，了解版本变更和业务入口。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/highlightguide/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "侧滑返回事件拦截案例",
            "id": "66",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/side_slip_Intercept.gif",
            "description": "本示例介绍使用NavDestination组件的onBackPressed回调对返回事件进行拦截，提示用户保存编辑内容，并使用preferences实例持久化保存内容。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/sideslipintercept/",
              "caseRepositoriesInfo": "",
              "insertCode": "SideslipIntercept()",
              "importCode": "import { SideslipIntercept } from 'sideslipintercept';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用NavDestination组件的onBackPressed回调对返回事件进行拦截，提示用户保存编辑内容，并使用preferences实例持久化保存内容。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/sideslipintercept/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "多媒体发布",
            "id": "155",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/publish_multimedia_updates.gif",
            "description": "本示例主要介绍使用@ohos.file.photoAccessHelper实现访问系统相册获取媒体资源的多媒体发布场景。 该场景多用于社交软件朋友圈、评论动态发布的场景。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/publishmultimediaupdates/",
              "caseRepositoriesInfo": "",
              "insertCode": "PublishMultimediaUpdates()",
              "importCode": "import { PublishMultimediaUpdates } from 'publishmultimediaupdates';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍使用@ohos.file.photoAccessHelper实现访问系统相册获取媒体资源的多媒体发布场景。 该场景多用于社交软件朋友圈、评论动态发布的场景。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/publishmultimediaupdates/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "发短信案例",
            "id": "127",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/send_message.gif",
            "description": "本示例介绍如何在应用中调起系统短信，通过startAbility接口中的指定号码并调起系统的发送短信页面。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/sendmessage/",
              "caseRepositoriesInfo": "",
              "insertCode": "MessageView()",
              "importCode": "import { MessageView } from 'sendmessage';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍如何在应用中调起系统短信，通过startAbility接口中的指定号码并调起系统的发送短信页面。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/sendmessage/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "AI图片文字智能识别",
            "id": "144",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/address_recognize.gif",
            "description": "本示例使用CoreVisionKit智能识别图片中的文字，并使用NaturalLanguageKit自然语言处理工具集将识别的文字智能转换为姓名、手机、地址等信息。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/addressrecognize/",
              "caseRepositoriesInfo": "",
              "insertCode": "AddressRecognize()",
              "importCode": "import { AddressRecognize } from 'addressrecognize';",
              "codeAnnotation": "/**\n       * 功能描述：本示例使用CoreVisionKit智能识别图片中的文字，并使用NaturalLanguageKit自然语言处理工具集将识别的文字智能转换为姓名、手机、地址等信息。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/addressrecognize/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "H5页面资源离线缓存案例",
            "id": "145",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/h5_cache.gif",
            "description": "本模块结合内存缓存和磁盘缓存实现了一个H5页面资源离线缓存案例。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/h5cache/",
              "caseRepositoriesInfo": "",
              "insertCode": "H5Cache()",
              "importCode": "import { H5Cache } from 'h5cache';",
              "codeAnnotation": "/**\n       * 功能描述：本模块结合内存缓存和磁盘缓存实现了一个H5页面资源离线缓存案例。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/h5cache/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "启动页实现案例",
            "id": "146",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/window_start_icon.gif",
            "description": "本示例介绍了如何实现全屏启动页。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/advertisingpage/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "AdvertisingPageComponent()",
              "importCode": "import { AdvertisingPageComponent } from 'advertisingpage';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍了如何实现全屏启动页。\n       * 参数介绍：isShow：控制启动页是否显示      * README：https://gitee.com/wangzhiyusss/cases_1/blob/master/CommonAppDevelopment/doc/WINDOW_SATART_ICON.md\n       */",
              "napi": false
            }
          },
          {
            "name": "应用异常处理案例",
            "id": "17",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/application_exception.gif",
            "description": "本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法，主要分为应用崩溃、应用卡死以及系统查杀三种。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/applicationexception/",
              "caseRepositoriesInfo": "",
              "insertCode": "ApplicationExceptionView()",
              "importCode": "import { ApplicationExceptionView } from 'applicationexception';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法，主要分为应用崩溃、应用卡死以及系统查杀三种。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/applicationexception/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "Web页面长截图",
            "id": "101",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/web_snapshot.gif",
            "description": "本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/webpagesnapshot/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "WebPageSnapshotComponent()",
              "importCode": "import { WebPageSnapshotComponent } from 'webpagesnapshot';",
              "codeAnnotation": "/**\n       * 功能描述：本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/webpagesnapshot/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "GBK文本格式解码",
            "id": "12",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/gbk_friends_book.jpeg",
            "description": "本示例介绍使用第三方库的Axios获取GBK格式的网络数据时，通过util实现GBK转换UTF-8格式。该场景多用于需要转换编码格式的应用。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/gbktranscoding/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "FriendsBookComponent()",
              "importCode": "import { FriendsBookComponent } from 'gbktranscoding';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用第三方库的Axios获取GBK格式的网络数据时，通过util实现GBK转换UTF-8格式。该场景多用于需要转换编码格式的应用。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/gbktranscoding/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "视频悬浮窗案例",
            "id": "161",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/pip_window.gif",
            "description": "本示例主要介绍视频小窗口播放场景，利用媒体的AVPlayer实现视频播放以及相关操作，利用PiPWindow开启悬浮窗从而实现小窗口播放视频。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/pipwindow/",
              "caseRepositoriesInfo": "",
              "insertCode": "PipWindowViewComponent()",
              "importCode": "import { PipWindowViewComponent } from 'pipwindow';",
              "codeAnnotation": "/**\n       * 功能描述：本示例主要介绍视频小窗口播放场景，利用媒体的AVPlayer实现视频播放以及相关操作，利用PiPWindow开启悬浮窗从而实现小窗口播放视频。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/pipwindow/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "地图定位打卡案例",
            "id": "162",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/clock_in.gif",
            "description": "本示例使用[geoLocationManager](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-geolocationmanager-V5)进行地理位置定位和地理信息获取，并利用[MapComponent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/map-mapcomponent-V5)组件展示地图，添加用户位置和打卡范围，通过计算用户位置和打卡中心点的距离判断用户是否处于打卡区域，实现了打卡功能。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/clockin/",
              "caseRepositoriesInfo": "",
              "insertCode": "ClockInSamplePage()",
              "importCode": "import { ClockInSamplePage } from 'clockin';",
              "codeAnnotation": "/**\n       * 功能描述：本示例使用geoLocationManager进行地理位置定位和地理信息获取，并利用MapComponent组件展示地图，添加用户位置和打卡范围，通过计算用户位置和打卡中心点的距离判断用户是否处于打卡区域，实现了打卡功能。\n       * 参数介绍：clockInController: 打卡组件控制器，isInArea: 是否在打卡范围内，isLocationButtonVisible: 是否显示右下角定位按钮，locationButtonPosition: 设置定位按钮位置，mapOptions: 地图初始化参数，getMapController: 获取地图控制器的方法，customInfoWindowSlotParam: 自定义信息窗口插槽\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/clockin/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "文件压缩案例",
            "id": "164",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media//compress_file.gif",
            "description": "本示例介绍使用zlib.compressfile接口在worker子线程中进行文件压缩。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/compressfile/",
              "caseRepositoriesInfo": "",
              "insertCode": "CompressFileViewComponent()",
              "importCode": "import { CompressFileViewComponent } from 'compressfile';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用zlib.compressfile接口在worker子线程中进行文件压缩。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/compressfile/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "用户隐私协议案例",
            "id": "165",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/privacy_agreement.gif",
            "description": "本示例主要介绍使用web组件实现隐私协议与用户协议的展示。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/privacyagreement/",
              "caseRepositoriesInfo": "",
              "insertCode": "PrivacyAgreementComponent()",
              "importCode": "import { PrivacyAgreementComponent } from 'privacyagreement';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用web组件加载用户协议、隐私协议等场景。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/privacyagreement/README.md\n       */",
              "napi": false
            }
          }
        ]
      },
      {
        "typeInfo": {
          "typeName": "perfermance",
          "typeDesc": "性能示例",
          "typeDetail": ""
        },
        "repositoriesInfoList": [
          {
            "name": "使用ArkUI的FrameNode扩展实现动态布局类框架",
            "id": "135",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/imperative_dynamic_layouts.gif",
            "description": "本实例主要讲解如何使用ArkUI的FrameNode扩展实现动态布局类框架。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/perfermance/imperativedynamiclayouts/",
              "caseRepositoriesInfo": "https://gitee.com/sephyrothcloud/cases.git",
              "insertCode": "ImperativeViewComponent()",
              "importCode": "import { ImperativeViewComponent } from 'imperativedynamiclayouts';",
              "codeAnnotation": "/**\n       * 功能描述：本实例主要讲解如何使用ArkUI的FrameNode扩展实现动态布局类框架。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/perfermance/imperativedynamiclayouts/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "在TaskPool线程中操作关系型数据库实现案例",
            "id": "126",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/operate_rdb_in_taskpool.gif",
            "description": "本示例通过通讯录场景实例进行讲解，介绍了在 TaskPool 线程中操作关系型数据库的方法，涵盖了单条插入（新增联系人）、批量插入（通讯录同步）、删除（删除联系人）、修改（更新联系人信息）和查询等基本操作。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/perfermance/operaterdbintaskpool/",
              "caseRepositoriesInfo": "",
              "insertCode": "OperateRDBInTaskPool()",
              "importCode": "import { OperateRDBInTaskPool } from 'operaterdbintaskpool';",
              "codeAnnotation": "/**\n       * 功能描述：本示例通过通讯录场景实例进行讲解，介绍了在 TaskPool 线程中操作关系型数据库的方法，涵盖了单条插入（新增联系人）、批量插入（通讯录同步）、删除（删除联系人）、修改（更新联系人信息）和查询等基本操作。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/perfermance/operaterdbintaskpool/README.md\n       */",
              "napi": false
            }
          },
          {
            "name": "自定义动效tab",
            "id": "126",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/customanimationtabs.gif",
            "description": "本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果。",
            "codeInfo": {
              "casePath": "CommonAppDevelopment/feature/customanimationtab/",
              "caseRepositoriesInfo": "",
              "insertCode": "CustomAnimationTabView()",
              "importCode": "import { CustomAnimationTabView } from '@ohos-cases/custom_animation_tab';",
              "codeAnnotation": "/**\n       * 功能描述：本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果。\n       * 参数介绍：无\n       * README：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/perfermance/customanimationtab/README.md\n       */",
              "napi": false
            }
          }
        ]
      }
    ]
  },
  {
    "category": {
      "categoryName": "library",
      "categoryDesc": "三方库"
    },
    "categoryDetailList": [
      {
        "typeInfo": {
          "typeName": "animation",
          "typeDesc": "动效",
          "typeDetail": "动画效果"
        },
        "repositoriesInfoList": [
          {
            "name": "自定义视图实现Tab效果",
            "id": "151",
            "image": "https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/product/entry/src/main/resources/base/media/customanimationtabs.gif",
            "description": "CustomAnimationTab 实现自定义动效tab组件，跟随手势滑动、点击等交互事件产生对应动效。",
            "codeInfo": {
              "insertCode": "CustomAnimationTab({\n  tabsInfo: this.tabsInfo,\n  indicatorBarAttribute: this.indicatorBarAttribute,\n  tabBarAttribute: this.tabBarAttribute,\n  animationAttribute: this.animationAttribute,\n  tabController: this.tabController,\n  scroller: this.scroller,\n})",
              "importCode": "import { CustomAnimationTab } from '@ohos-cases/custom_animation_tab';",
              "dependenciesName": "@ohos-cases/custom_animation_tab",
              "dependenciesVersion": "1.0.0",
              "codeAnnotation": "/**\n       * 功能描述：CustomAnimationTab 实现自定义动效tab组件，跟随手势滑动、点击等交互事件产生对应动效。\n       * 参数介绍：tabsInfo: tab基本信息，indicatorBarAttribute: 背景条属性，tabBarAttribute: 页签条属性，animationAttribute: 动效属性，tabController： 控制器\n       * README：https://ohpm.openharmony.cn/#/cn/detail/@ohos-cases%2Fcustom_animation_tab\n       */",
              "napi": false
            }
          }
        ]
      }
    ]
  }
]