代码拉取完成，页面将自动刷新
同步操作将从 OpenHarmony-SIG/ohos_libpag 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
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/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%')
}
}
PAGView.play();
PAGView.pause();
PAGView.resume();
PAGView.stop();
PAGView.getState();
PAGView.setComposition(pagFile);
PAGView.setRepeatCount(0);
PAGFile.loadFromPath(filePath + '/' + 'cat.pag');
| 接口名 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| 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.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 ，请自由的享受和参与开源。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。