首页 > 其他分享 >HarmonyOS：三方库的基本使用（2）

HarmonyOS：三方库的基本使用（2）

时间：2024-10-27 15:21:18浏览次数：3  
标签：三方 基本 播放 动画 HarmonyOS animationItem ohos lottie

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）
➤GitHub地址：https://github.com/strengthen
➤原文地址：https://www.cnblogs.com/strengthen/p/18508470
➤如果链接不是为敢技术的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

 

如何获取三方库

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

  1. 通过访问Gitee网站开源社区获取

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

  2. 通过OpenHarmony三方库中心仓获取

    进入OpenHarmony三方库中心仓，根据类型或者直接搜索寻找需要的三方库。

常用三方库介绍

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

  • UI库：
    • @ohos/textlayoutbuilder：可以定制任一样式的文本构建工具，包括字体间距、大小、颜色、富文本高亮显示等。
    • @ohos/roundedimageview：可以生成圆角矩形、或者椭圆形等图片形状。
  • 网络库：
    • @ohos/axios：可以运行在node.js 和浏览器中，基于Axios 原库v1.3.4版本进行适配，并沿用其现有用法和特性。
  • 动画库：
    • @ohos/lottie：可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染。
    • @ohos/svg：可以解析SVG图片并渲染到页面上。

其他类别不单独介绍，感兴趣的可以前往Gitee或者三方库中心仓了解更多。

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

使用开源三方库@ohos/lottie

本节介绍@ohos/lottie定义、安装、卸载与使用。

什么是@ohos/lottie

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

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

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

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

@ohos/lottie的安装与卸载

  • 安装@ohos/lottie

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

    ohpm install @ohos/lottie

     

  • 卸载@ohos/lottie 通过ohpm执行卸载指令，将lottie从项目中删除，其程序包和配置信息将会从项目中移除。    
    1. ohpm uninstall @ohos/lottie

使用@ohos/lottie

  • @ohos/lottie的引入

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

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

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

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

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

       
    1. // 用animationItem实例接收
    2. let animationItem = lottie.loadAnimation({
    3. container: this.renderingContext, // 渲染上下文
    4. renderer: 'canvas', // 渲染方式
    5. loop: true, // 是否循环播放,默认true
    6. autoplay: true, // 是否自动播放，默认true
    7. path: 'common/lottie/data.json', // json路径
    8. })
    9. lottie.loadAnimation({ // 或者直接使用
    10. container: this.renderingContext, // 渲染上下文
    11. renderer: 'canvas', // 渲染方式
    12. loop: true, // 是否循环播放,默认true
    13. autoplay: true, // 是否自动播放，默认true
    14. path: 'common/lottie/data.json', // json路径
    15. })
  • @ohos/lottie控制动画

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

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

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

       
    1. // 订阅事件
    2. animationItem.addEventListener(event,function(){
    3. // TODO something
    4. })
    6. // 取消订阅事件
    7. animationItem.removeEventListener(event,function(){
    8. // TODO something
    9. })

    常见的event事件类型如下：

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

参考链接

     

标签：三方,基本,播放,动画,HarmonyOS,animationItem,ohos,lottie
From： https://www.cnblogs.com/strengthen/p/18508470

相关文章

  • mysql最基本使用命令（外键，联合查询，事件）
    1.创建一个表createtableclass(idintnotnullprimarykey,namechar(16));#插入数据insertintoclass(id,name)values(1,"张三");insertintoclass(id,name)values(2,"lisi");2.创建一个表，带外键createtablestudent(idint(11)notnull,namechar(16)......
  • Python工程数学7VPython制作3D图形和动画(上)坐标系、基本形状、点和线
    7简介VPython是一个基于Python语言的开源库，专门用于创建三维图形和动画。它为用户提供了一种简单而直观的方式，通过Python代码构建出生动的三维场景。VPython的设计初衷是让用户能够轻松地将物理概念可视化，因此在教学、科研和学习物理等领域得到了广泛应用。VPython的特点易......
  • 延迟任务管理：HarmonyOS Next 的灵活后台调度
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。延迟任务（DeferredTask）是HarmonyOSNex......
  • 解析短时任务与长时任务：HarmonyOS Next 后台开发的基础
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。后台任务是应用开发中不可或缺的一部分，......
  • HarmonyOS Next后台任务开发入门：背景与基本任务类型
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。随着移动互联网的快速发展，用户对应用的......
  • 节能型后台数据同步器:HarmonyOS Next的智能延迟任务管理
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。一、项目背景与需求分析后台数据同步......
  • 智能提醒助手——基于HarmonyOS Next的多场景后台任务实现
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。一、项目背景与需求分析智能提醒助手......
  • 后台提醒与代理提醒：HarmonyOS Next 的智能提醒管理
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。在移动应用开发中，及时有效的提醒功能对......
  • HarmonyOS：三方库的基本使用（1）
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）➤GitHub地址：https://github.com/strengthen➤原文地址：https://www.cnblogs.com/strengthen/p/18504527➤如果链接不是为敢技术的博客园地址，则可能是......
  • HarmonyOS：Node-API典型场景开发（2）
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）➤GitHub地址：https://github.com/strengthen➤原文地址：https://www.cnblogs.com/strengthen/p/18504462➤如果链接不是为敢技术的博客园地址，则可能是......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99