代码拉取完成，页面将自动刷新
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网页的方式下载
ohpm install @ohos/libpag
把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,newPAGComposition } from '@ohos/libpag';
import { common } from '@kit.AbilityKit';
import XComponentContext from "../interface/XComponentContext";
enum EnumPagPlayState {
ePagPlayNull,
ePagPlayPlaying,
ePagPlayPause,
ePagPlayComplete,
ePagPlayStop
};
@Entry
@Component
struct pagViewPage {
private xcomponentId: string = 'xcomponentId0';
private PAGFile = new newPAGFile();
private PAGView = new newPAGView();
private xComponentContext: XComponentContext | undefined = undefined;
private pagCompoition: newPAGComposition | undefined = undefined;
private componentIndex: number = 0;
@State isPause: boolean = true;
@State currentStatus: string = "init";
aboutToAppear(): void {
this.pagCompoition = new newPAGComposition(this.xcomponentId);
console.info('aboutToAppear');
}
/**
* 页面销毁时释放动画资源
*/
aboutToDisappear(): void {
console.info('aboutToDisappear');
}
buildComposition(): void {
let context = getContext(this) as common.UIAbilityContext;
let filePath = context.resourceDir ;
this.PAGFile.loadFromPath(filePath + '/' + 'cat.pag');
this.PAGView.setComposition();
this.PAGView.setRepeatCount(0);
this.PAGView.setSurface();
}
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: `${this.xcomponentId}`,
type: XComponentType.SURFACE,
libraryname: 'native_libpag'
})
.onLoad((xComponentContext) => {
this.PAGView.init(this.xcomponentId);
this.xComponentContext = xComponentContext as XComponentContext;
this.currentStatus = "index";
this.buildComposition();
})
.onDestroy(() => {
console.log('onDestroy');
})
.id("xcomponent"+this.componentIndex)
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%')
}
}
export default interface XComponentContext {
drawPattern(): void;
getStatus(): XComponentContextStatus;
};
type XComponentContextStatus = {
hasDraw: boolean,
hasChangeColor: boolean,
};
PAGView.play();
PAGView.pause();
PAGView.resume();
PAGView.stop();
PAGView.isPlaying();
PAGView.getState();
PAGView.setComposition();
PAGView.setRepeatCount(2);
PAGView.setScaleMode(PAGScaleMode.None);
PAGView.scaleMode();
PAGView.setMatrix(1,0.5,0,0,1,0);
PAGView.currentFrame();
PAGView.setProgress(20);
PAGView.setCacheEnabled(true);
PAGView.cacheEnabled();
PAGView.setCacheScale(0);
PAGView.cacheScale();
PAGView.setMaxFrameRate(50);
PAGView.maxFrameRate();
PAGView.setUseDiskCache(true);
PAGView.useDiskCache();
PAGView.getComposition();
PAGView.getLayersUnderPoint(200,200);
PAGView.setVideoEnabled(true);
PAGView.videoEnabled();
PAGView.setPath(filePath + '/' + 'cat.pag');
PAGView.getPath()
PAGView.getProgress()
PAGView.duration()
PAGView.flush()
PAGView.addPlayStateListener(playFuc)
PAGView.addPlayStateListener(pauseFuc)
PAGView.addPlayStateListener(stopFuc)
PAGView.addRepeatCountListener(RepeatCountFuc)
PAGView.addCurrentFrameListener(CurrentFrame)
PAGView.removePlayStateListener(playFuc)
PAGView.addPlayStateListener(pauseFuc)
PAGView.addPlayStateListener(stopFuc)
PAGView.removeRepeatCountListener(RepeatCountFuc)
PAGView.removeCurrentFrameListener(CurrentFrame)
PAGView.freeCache()
PAGView.matrix()
PAGView.repeatCount();
PAGFile.setDuration(50);
PAGFile.loadFromPath(filePath + '/' + 'cat.pag');
PAGFile.setStartTime(0);
PAGFile.duration();
pagFile.numImages();
pagFile.numTexts();
pagFile.numVideos();
pagFile.path();
pagFile.maxSupportedTagLevel()
pagFile.getEditableIndices(3);
pagFile.timeStretchMode();
pagFile.tagLevel();
PAGFile.setTimeStretchMode(0);
PAGComposition.init(0,0);
PAGComposition.addLayerAt(0);
PAGComposition.getLayerAt(0);
PAGComposition.addLayer();
pagCompoition.removeLayerAt(0);
PAGComposition.removeLayer();
PAGComposition.removeAllLayers();
PAGComposition.numChildren();
| 接口名 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| Init | id: string | void | 初始化配置 |
| setComposition | 无 | void | 设置一个新的PAGComposition，让PAGPlayer作为内容呈现 |
| play | 无 | void | 开始播放接口 |
| pause | 无 | void | 在当前位置暂停动画 |
| resume | 无 | void | 在当前位置继续播放动画 |
| stop | 无 | void | 停止播放 |
| isPlaying | 无 | number | 判断动画是否播放 |
| getState | 无 | number | 获取动画状态 |
| setRepeatCount | count:number | void | 设置动画播放次数 |
| repeatCount | 无 | number | 返回动画播放的总次数 |
| setScaleMode | mode: number | void | 设置缩放模式 |
| scaleMode | 无 | number | 返回当前缩放模式 |
| setMatrix | a: number,b: number,c:number,d:number,tx: number,ty:number | void | 设置矩阵变换 |
| setProgress | value: number | void | 设置播放的起始帧数 |
| setCacheEnabled | value: boolean | void | 设置cacheEnabled属性的值 |
| cacheEnabled | 无 | boolean | 如果设置为true，PAG渲染器将缓存每个层的静态内容的内部位图表示 |
| setCacheScale | value: number | void | 设置cacheScale属性的值 |
| cacheScale | 无 | boolean | 该值定义内部图形缓存的比例因子，范围从0.0到1.0 |
| setMaxFrameRate | value: number | void | 设置帧率 |
| maxFrameRate | 无 | number | 渲染的帧率 |
| setUseDiskCache | value: boolean | void | 设置useDiskCache属性的值 |
| useDiskCache | 无 | boolean | 如果设置为true，PAG将把相关的渲染数据缓存到磁盘文件中，例如视频合成的解码图像帧 |
| getComposition | 无 | PAGComposition | 返回当前PAGView的PAG组合以呈现为内容 |
| getLayersUnderPoint | localX: number,localY: number | PAGLayer[] | 返回位于指定点下的层数组 |
| setVideoEnabled | value: boolean | void | 设置videoEnabled属性的值 |
| videoEnabled | 无 | boolean | 如果设置为false，PAGView将跳过视频合成的渲染 |
| setPath | path: string | boolean | 从指定的路径加载一个pag文件，如果该文件不存在或数据不是pag文件，则返回false |
| getPath | 无 | String | 由setPath（）设置的pag文件的路径字符串 |
| getProgress | 无 | number | 返回播放位置的当前进度，值从0.0到1.0 |
| duration | 无 | number | 当前合成的持续时间（以微秒为单位） |
| flush | 无 | boolean | 调用此方法可立即渲染当前位置 |
| addPlayStateListener | cb: (state: number) => void | number | 添加播放状态的监听 |
| addRepeatCountListener | cb: (state: number) => void | number | 添加播放次数的监听 |
| addCurrentFrameListener | cb: (state: number) => void | number | 添加对当前帧的监听 |
| removePlayStateListener | cb: (state: number) => void | number | 移除播放状态的监听 |
| removeRepeatCountListener | cb: (state: number) => void | number | 移除播放次数的监听 |
| removeCurrentFrameListener | cb: (state: number) => void | number | 移除对当前帧的监听 |
| freeCache | 无 | void | 立即释放pag视图创建的缓存 |
| matrix | 无 | Matrix | 返回当前矩阵的副本 |
| 接口名 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| setDuration | number | void | 设置此PAGFile的持续时间 |
| loadFromPath | string | PAGFile | 从指定路径加载pag文件 |
| setStartTime | number | void | 设置图层的开始时间 |
| duration | 无 | number | 该层的持续时间 |
| numImages | 无 | number | 可替换图像的数量 |
| numTexts | 无 | number | 可编辑文本的数量 |
| numVideos | 无 | number | 视频作品的数量 |
| path | 无 | String | 此文件的路径字符串 |
| maxSupportedTagLevel | 无 | number | 标记级别 |
| getEditableIndices | layerType: number | number[] | 返回此PAGFile中可编辑层的索引 |
| timeStretchMode | 无 | number | 指示当文件的持续时间更改时，如何拉伸原始持续时间以适应目标持续时间 |
| tagLevel | 无 | number | 此pag文件所需的标记级别 |
| setTimeStretchMode | value: number | void | 设置此文件的timeStretchMode。 |
| 接口名 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| init | width: number, height: number | void | 创建一个具有指定大小的空 PAGComposition |
| addLayerAt | index: number | void | 将 PAGLayer 添加到当前 PAGComposition 的指定索引处 |
| addLayer | 无 | void | 将 PAGLayer 添加到当前 PAGComposition 的顶部 |
| getLayerAt | index: number | void | 返回存在于指定索引处的子层 |
| removeLayer | 无 | void | 从当前 PAGComposition 中删除指定的 PAGLayer |
| removeAllLayers | 无 | void | 从当前 PAGComposition 中删除所有 PAGLayers |
| removeLayerAt | index: number | void | 从当前 PAGComposition 中删除指定索引处的 PAGLayer |
| numChildren | 无 | void | 该合成的子层数 |
参考 libpag_compile.md文档
|---- libpag
| |---- entry # 示例代码文件夹
| |---- library # library 库文件夹
| |---- cpp # native模块
| |----- common # libpag内部公共模块
| |----- manager # 封装NAPI接口
| |----- napi # 封装NAPI接口
| |----- render # 动画渲染模块
| |----- third_party # 三方库依赖
| |----- types # d.ts文件导出模块
| |---- ets # ets接口模块
| |----- utils # 工具
| |---- README.MD # 安装使用方法
使用过程中发现任何问题都可以提Issue 给我们，当然，我们也非常欢迎你给我们提PR。
本项目基于 Apache License 2.0 ，请自由的享受和参与开源。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。