HarmonyOS4.0从零开始的开发教程20三方库的基本使用

发布时间:2023年12月20日

HarmonyOS(十八)三方库的基本使用

三方库概述

三方库是开发者在系统能力的基础上进行了一层具体功能的封装,对其能力进行拓展,提供更加方便的接口,提升开发效率的工具。如果是发布到开源社区,称为开源三方库,开发者可以通过访问开源社区获取。而一些团队内部开发使用的三方库,没有发布到开源社区的称为内部三方库。本课程主要介绍开源三方库。

如何获取三方库

目前提供了两种途径获取开源三方库:

  1. 通过访问

    Gitee网站

    开源社区获取

    在Gitee中,搜索OpenHarmony-TPC仓库,在tpc_resource中对三方库进行了资源汇总,可以供开发者参考。

  2. 通过

    HarmonyOS开发者

    官网提供的资源中心获取

    进入HarmonyOS开发者官网选择 开发>DevEco Service,在DevEco Service页面下找到资源中心,在资源中心找到三方库入口。

常用三方库介绍

常用的三方库可以分为UI、动画、网络、数据、安全、多媒体、框架、工具等。

  • UI库:

    • PhototView:可以通过该组件快速实现图片的缩放、平移和旋转等操作。
    • RoundImageView:可以生成圆角矩形、或者椭圆形等图片形状。
  • 网络库:

    • HttpClient:其以耳熟能详的OKHTTP为基础,整合android-async-http、AutobahnAndroid、OkGo等库的功能特性,实现了自定义拦截器、cookie管理等功能。
    • axios:运行在nodejs和浏览器中的axios,也是比较熟知的基于promise的网络请求库,同样实现了强大的网络功能。
  • 动画库:

    • lottie:用于解决应用中复杂动画的问题。
    • reboud:可以模拟弹簧动力学,实现驱动物理效果等。

其他类别不单独介绍,感兴趣的可以通过以上获取途径进行访问了解详情。

三方库在系统能力的基础上,提供了更加方便的使用,在许多场景下,能够极大提升开发者的开发效率,下面将以lottie为例介绍三方库的基本使用。

使用开源三方库lottie

什么是lottie

lottie是基于lottie-web开发,集成在三方库社区内的开源版本,是HarmonyOS系统中复杂动画的一种解决方案。

动画是传达想法和创造更好的用户交互体验的工具,常见使用动画的场景如下:

  • 启动动画:APP logo动画的播放。
  • 加载动画:网络请求的loading动画。
  • 上下拉刷新动画:请求更多资源时的刷新动画。
  • 按钮动画:切换按钮、编辑按钮、播放按钮等按钮的切换过渡动画。
  • 视图转场动画:一些场景的转场添加动画能够提升用户体验。

lottie提供了使用JSON动画文件的解决方案,开发者可以在原生应用中像使用静态图像一样使用动画,而不用关注动画的实现过程,并且lottie具有一套完整的API控制动画的行为,可以让动画更具有交互性。接下来将介绍lottie的安装和基本使用。

lottie的安装与卸载

  • 安装lottie

    通过ohpm执行对应的指令,将lottie安装到项目中。

    ohpm install @ohos/lottie
    
  • 卸载lottie

    通过ohpm执行卸载指令,将lottie从项目中删除,其程序包和配置信息将会从项目中移除。

    ohpm uninstall @ohos/lottie
    

使用lottie

  • lottie的引入

    通过import指令在项目中引入lottie到文件中。

    import lottie from '@ohos/lottie'
    
  • 构建Canvas画布

    lottie解析JSON动画文件的数据需要基于Canvas 画布进行2D渲染,所以在加载JSON动画之前,要先初始化渲染上下文,并在画面中创建Canvas画布区域,将对应的渲染上下文renderingContext传递给Canvas。

    // 初始化渲染上下文  
    private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true) // 设置开启抗锯齿
    private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)  // 创建2D渲染上下文
    
    // 加载Canvas画布   
    Canvas(this.renderingContext)
      ...
    
  • 使用lottie加载JSON动画

    加载JSON动画需要用到loadAnimation方法,在方法中需配置相应的初始设置,包括渲染上下文、渲染方式以及JSON动画资源的路径等。可以直接使用lottie.loadAnimation方法,也可以用一个animationItem实例来接收返回的animationItem对象。

    // 用animationItem实例接收
    let animationItem = lottie.loadAnimation({
                container: this.renderingContext,            // 渲染上下文
                renderer: 'canvas',                          // 渲染方式
                loop: 10,                                    // 设置为循环播放10次
                autoplay: true,                              // 是否自动播放,默认true
                path: 'common/lottie/data.json',             // json路径
              })
    // 或者直接使用      
        lottie.loadAnimation({
                container: this.renderingContext,            // 渲染上下文
                renderer: 'canvas',                          // 渲染方式
                loop: true,                                  // 默认为true
                autoplay: true,                              // 是否自动播放,默认true
                path: 'common/lottie/data.json',             // json路径
              })
    
  • lottie控制动画

    lottie内封装了包括状态控制,进度控制,播放设置控制和属性控制等多个API,用户可以利用这些API完成对动画的控制,实现更加灵活的交互效果。

    // 播放、暂停、停止、销毁  可以使用lottie,也可以使用animationItem实例进行控制
    lottie.play();        // 从目前停止的帧开始播放
    lottie.stop();        // 停止播放,回到第0帧
    lottie.pause();       // 暂停该动画,在当前帧停止并保持
    lottie.togglePause(); // 切换暂停/播放状态
    lottie.destroy();     // 删除该动画,移除相应的元素标签等。在unmount的时候,需要调用该方法
    
    // 播放进度控制
    animationItem.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
    animationItem.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
    animationItem.goToAndStop(30, true);       // 例:跳转到第30帧并停止
    animationItem.goToAndPlay(300);            // 例:跳转到第300毫秒并播放
    
    // 控制帧播放
    animationItem.setSegment(5,15);             // 限定动画资源播放时的整体帧范围,即设置动画片段
    animationItem.resetSegments(5,15);          // 重置播放的动画片段
    animationItem.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组,forceFlag表示是否立即强制播放该片段
    animationItem.playSegments([10,20], false); // 例:播放完之前的片段,播放10-20帧
    animationItem.playSegments([[5,15],[20,30]], true); //例: 直接播放5-15帧和20-30帧
    
    // 动画基本属性控制
    lottie.setSpeed(speed);         // 设置播放速度,speed为1表示正常速度
    lottie.setDirection(direction); // 设置播放方向,1表示正向播放,-1表示反向播放
    
    // 获取动画帧数属性
    animationItem.getDuration();    //获取动画时长
    
  • 事件订阅

    在一些特殊场景下,比如开始加载动画或者动画播放结束时,可能需要执行相应的操作,在lottie中提供了事件订阅和取消订阅的功能,当触发对应的event,会执行传入的回调函数,用户可以在回调函数中完成要实现的功能。

    // 订阅事件
    animationItem.addEventListener(event,function(){
        // TODO something
    })
    
    // 取消订阅事件
    animationItem.removeEventListener(event,function(){
        // TODO something
    })
    

    常见的event事件类型如下:

    // event事件类型
    'enterFrame'   // 每进入一帧就会触发
    'loopComplete' // 当前循环下播放(循环播放/非循环播放)结束时触发
    'complete'     // 播放完成时触发
    'segmentStart' // 播放指定片段时触发,playSegments、resetSegments等方法刚开始播放指定片段时会发出,如果playSegments播放多个片段,多个片段最开始都会触发。
    'destroy'      // 销毁动画时触发
    'data_ready'   // 数据准备完成
    'DOMLoaded'    // 动画相关dom已经被添加
    'error'        // 出现错误
    'data_failed'  // 数据加载失败
      ...
    

参考链接

  • 三方库资源汇总:https://gitee.com/openharmony-tpc/tpc_resource
  • lottie的使用:https://gitee.com/openharmony-tpc/lottieETS
文章来源:https://blog.csdn.net/qq_46189388/article/details/135104542
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。