# ohos_libpag **Repository Path**: zhanglu-author/ohos_libpag ## Basic Information - **Project Name**: ohos_libpag - **Description**: No description available - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 25 - **Created**: 2024-05-03 - **Last Updated**: 2024-05-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # LibPag ## 简介 > PAG（便携式动画图形）文件的官方渲染库，可跨多个平台本地渲染 After Effects 动画。 ## 演示 ## 编译运行 1、通过IDE（DevEco Studio：4.1.500）工具下载依赖SDK，Tools->SDK Manager->OpenHarmony SDK 把native选项勾上下载，API版本>=10 2、开发板选择RK3568，ROM下载地址. 选择开发板类型是rk3568，请使用最新的版本 3、使用git clone下载源码，不要直接通过gitee网页的方式下载 ## 下载安装 ```shell ohpm install @ohos/pag ``` ## 使用说明 把so和a文件放入路径ohos_libpag\libpag\libs\arm64-v8a下 把so和a文件放入路径ohos_libpag\libpag\src\main\cpp\thirdparty\pag\arm64-v8a\lib下 ### 将三方库加入工程中 target_link_libraries(native_libpag PRIVATE ${NATIVERENDER_ROOT_PATH}/thirdparty/pag/${OHOS_ARCH}/lib/libpag.so) target_link_libraries(native_libpag PRIVATE ${NATIVERENDER_ROOT_PATH}/thirdparty/pag/${OHOS_ARCH}/lib/libtgfx.a) ### 将三方库的头文件加入工程中 target_include_directories(native_libpag PRIVATE ${NATIVERENDER_ROOT_PATH}/thirdparty/pag/${OHOS_ARCH}/include) ### 在前端中使用 ``` import { newPAGFile, newPAGView } from '@ohos/pag'; import { common } from '@kit.AbilityKit'; import XComponentContext from "../interface/XComponentContext" import { GetCat } from '../common/ts/GetCat' let context = getContext(this) as common.UIAbilityContext; enum EnumPagPlayState { ePagPlayNull, ePagPlayPlaying, ePagPlayPause, ePagPlayComplete, ePagPlayStop }; @Entry @Component struct pagViewPage { private title: string = 'pagViewPage' @State animationDuration: string = '获取动画时长' @State pauseState: string = '判断当前动画是否正在播放' @State isCanvasVisible: Visibility = Visibility.Visible; private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true) private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings) private animateName: string = "grunt"; // private context = getContext(this) as common.UIAbilityContext; private PAGFile = new newPAGFile(); private PAGView = new newPAGView(); @State getCat:GetCat = new GetCat() imageUrl: string = 'https://img0.baidu.com/it/u=605626320,3989505182&fm=253&fmt=auto&app=138&f=PNG?w=501&h=500'; dynamicFilePath: string = ''; @State isPause: boolean = true; aboutToAppear(): void { this.PAGView.init(); console.info('aboutToAppear'); } /** * 页面销毁时释放动画资源 */ aboutToDisappear(): void { console.info('aboutToDisappear'); } getDynamicFileName(dynamicFilePath:string) { let dynamicFileName = `${this.dynamicFilePath}`; if (!dynamicFileName.endsWith('.pag') && !dynamicFileName.includes('/') && !dynamicFileName.includes('http')) { dynamicFileName += '.pag'; } console.log(`filename: ${dynamicFileName}`) return dynamicFileName; }; @State currentStatus: string = "init"; private xComponentContext: XComponentContext | undefined = undefined; buildComposition(): void { let context = getContext(this) as common.UIAbilityContext; let filePath = context.resourceDir ; let pagFile = this.PAGFile.loadFromPath(filePath + '/' + 'cat.pag'); console.log("4.28 pagFile "+pagFile); this.PAGView.setComposition(pagFile); this.PAGView.setRepeatCount(0); } build() { Column() { Row() { Text('Native XComponent Sample') .fontSize('24fp') .fontWeight(500) .margin({ left: 24, top: 12 }) } .margin({ top: 24 }) .width('100%') .height(56) Column({ space: 10 }) { XComponent({ id: 'xcomponentId', type: XComponentType.SURFACE, libraryname: 'native_libpag' }) .onLoad((xComponentContext) => { this.xComponentContext = xComponentContext as XComponentContext; this.currentStatus = "index"; this.buildComposition(); }) .onDestroy(() => { console.log('onDestroy'); }) .id("xcomponent") Text(this.currentStatus) .fontSize('24fp') .fontWeight(500) } .onClick(() => { }) .margin({ top: 27, left: 12, right: 12 }) .height('40%') .width('90%') Row() { Button('播放') .onClick(() => { this.isPause = true; const state = this.PAGView.getState(); if (state === EnumPagPlayState.ePagPlayPause) { this.PAGView.resume(); } else { this.PAGView.play(); } }) Button(this.isPause ? '暂停' : '继续播放') .onClick(() => { const state = this.PAGView.getState(); if (state === EnumPagPlayState.ePagPlayStop || state === EnumPagPlayState.ePagPlayComplete) { return } if (this.isPause) { this.PAGView.pause(); } else { this.PAGView.resume(); } this.isPause = !this.isPause; }) Button('停止') .onClick(() => { this.isPause = true; const state = this.PAGView.getState(); if (state === EnumPagPlayState.ePagPlayComplete) { return; } this.PAGView.stop(); }) }.margin({ top: 5 }) } .width('100%') .height('100%') } } ``` ### play ``` PAGView.play(); ``` ### pause ``` PAGView.pause(); ``` ### resume ``` PAGView.resume(); ``` ### stop ``` PAGView.stop(); ``` ### getState ``` PAGView.getState(); ``` ### 设置一个新的PAGComposition，让PAGPlayer作为内容呈现。 ``` PAGView.setComposition(pagFile); ``` ### Set the number of times the animation to play ``` PAGView.setRepeatCount(0); ``` ### 加载pag文件，仅支持沙箱路径 ``` PAGFile.loadFromPath(filePath + '/' + 'cat.pag'); ``` ## 接口说明 ### PAGView | 接口名 | 参数 | 返回值 | 说明 | | ---------------------------| --------------------------- | ----------------- | ----------------------------------------- | | pagInit | 无 | void | 初始化配置 | | setComposition | newComposition:PAGComposition| void | 设置一个新的PAGComposition，让PAGPlayer作为内容呈现 | play | 无 | void | 开始播放接口 | | pause | 无 | void | 在当前位置暂停动画 | | resume | 无 | void | 在当前位置继续播放动画 | | stop | 无 | void | 停止播放 | | getState | 无 | number | 获取动画播放状态 | | setRepeatCount | count:number | void | 设置动画播放次数 | ## 源库编译 参考 [libpag_compile.md](https://gitee.com/openharmony-sig/ohos_libpag/libpag_compile.md)文档 ## 目录结构 ```javascript |---- libpag | |---- entry # 示例代码文件夹 | |---- library # library 库文件夹 | |---- cpp # native模块 | |----- common # libpag内部公共模块 | |----- manager # 封装NAPI接口 | |----- napi # 封装NAPI接口 | |----- render # 动画渲染模块 | |----- third_party # 三方库依赖 | |----- types # d.ts文件导出模块 | |---- ets # ets接口模块 | |----- utils # 工具 | |---- README.MD # 安装使用方法 ``` ## 贡献代码 使用过程中发现任何问题都可以提[Issue](https://gitee.com/openharmony-sig/ohos_libpag/issues) 给我们，当然，我们也非常欢迎你给我们提[PR](https://gitee.com/openharmony-sig/ohos_libpag/pulls)。 ## 开源协议 本项目基于 Apache License 2.0 ，请自由的享受和参与开源。