OpenHarmony三方库组件：LibPag

最新推荐文章于 2024-07-16 15:12:13 发布
最新推荐文章于 2024-07-16 15:12:13 发布
阅读量881 收藏 26
点赞数 16
分类专栏： 鸿蒙 鸿蒙三方库 文章标签： harmonyos 华为 鸿蒙 深度学习 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/situnanQAQ/article/details/140014256
版权

简介

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 NATIVERENDERROOTPATH/thirdparty/pag/𝑁𝐴𝑇𝐼𝑉𝐸𝑅𝐸𝑁𝐷𝐸𝑅𝑅𝑂𝑂𝑇𝑃𝐴𝑇𝐻/𝑡ℎ𝑖𝑟𝑑𝑝𝑎𝑟𝑡𝑦/𝑝𝑎𝑔/{OHOS_ARCH}/lib/libpag.so) target_link_libraries(native_libpag PRIVATE NATIVERENDERROOTPATH/thirdparty/pag/𝑁𝐴𝑇𝐼𝑉𝐸𝑅𝐸𝑁𝐷𝐸𝑅𝑅𝑂𝑂𝑇𝑃𝐴𝑇𝐻/𝑡ℎ𝑖𝑟𝑑𝑝𝑎𝑟𝑡𝑦/𝑝𝑎𝑔/{OHOS_ARCH}/lib/libtgfx.a)

将三方库的头文件加入工程中

target_include_directories(native_libpag PRIVATE NATIVERENDERROOTPATH/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%')
  }
}
XComponentContext
export default interface XComponentContext {
  drawPattern(): void;

  getStatus(): XComponentContextStatus;
};

type XComponentContextStatus = {
  hasDraw: boolean,
  hasChangeColor: boolean,
};

PAGView

播放

PAGView.play();

暂停

PAGView.pause();

继续播放

PAGView.resume();

停止

PAGView.stop();

是否播放

PAGView.isPlaying();

获取动画状态

PAGView.getState();

为PAGView设置一个新的PAG组合以作为内容呈现

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);

设置cacheEnabled属性的值

PAGView.setCacheEnabled(true);

如果设置为true，PAG渲染器将缓存每个层的静态内容的内部位图表示

PAGView.cacheEnabled();

设置cacheScale属性的值。

PAGView.setCacheScale(0);

该值定义内部图形缓存的比例因子，范围从0.0到1.0。

PAGView.cacheScale();

设置帧率

PAGView.setMaxFrameRate(50);

渲染的帧率

PAGView.maxFrameRate();

设置useDiskCache属性的值

PAGView.setUseDiskCache(true);

如果设置为true，PAG将把相关的渲染数据缓存到磁盘文件中，例如视频合成的解码图像帧

PAGView.useDiskCache();

返回当前PAGView的PAG组合以呈现为内容

PAGView.getComposition();

返回位于指定点下的层数组

PAGView.getLayersUnderPoint(200,200);

设置videoEnabled属性的值

PAGView.setVideoEnabled(true);

如果设置为false，PAGView将跳过视频合成的渲染

PAGView.videoEnabled();

从指定的路径加载一个pag文件，如果该文件不存在或数据不是pag文件，则返回false

PAGView.setPath(filePath + '/' + 'cat.pag');

由setPath（）设置的pag文件的路径字符串

PAGView.getPath()

返回播放位置的当前进度，值从0.0到1.0

PAGView.getProgress()

当前合成的持续时间（以微秒为单位）

PAGView.duration()

调用此方法可立即渲染当前位置

PAGView.flush()

添加播放状态的监听

PAGView.addPlayStateListener(playFuc)
PAGView.addPlayStateListener(pauseFuc)
PAGView.addPlayStateListener(stopFuc)

添加重复次数的监听

PAGView.addRepeatCountListener(RepeatCountFuc)

添加当前帧的监听

PAGView.addCurrentFrameListener(CurrentFrame)

移除播放状态的监听

PAGView.removePlayStateListener()
PAGView.addPlayStateListener(pauseFuc)
PAGView.addPlayStateListener(stopFuc)

移除重复次数的监听

PAGView.removeRepeatCountListener()

移除当前帧的监听

PAGView.removeCurrentFrameListener()

立即释放pag视图创建的缓存

PAGView.freeCache()

返回当前矩阵的副本

PAGView.matrix()

返回动画播放的总次数

PAGView.repeatCount();

PAGFile

设置此PAGFile的持续时间。

PAGFile.setDuration(50);

加载pag文件，仅支持沙箱路径

PAGFile.loadFromPath(filePath + '/' + 'cat.pag');

设置图层的开始时间

PAGFile.setStartTime(0);

该层的持续时间

PAGFile.duration();

可替换图像的数量

pagFile.numImages();

可编辑文本的数量

pagFile.numTexts();

视频作品的数量

pagFile.numVideos();

此文件的路径字符串

pagFile.path();

标记级别

pagFile.maxSupportedTagLevel()

返回此PAGFile中可编辑层的索引

pagFile.getEditableIndices(3);

指示当文件的持续时间更改时，如何拉伸原始持续时间以适应目标持续时间

pagFile.timeStretchMode();

此pag文件所需的标记级别

pagFile.tagLevel();

设置此文件的timeStretchMode。

PAGFile.setTimeStretchMode(0);

PAGComposition

创建一个具有指定大小的空 PAGComposition

PAGComposition.init(0,0);

将 PAGLayer 添加到当前 PAGComposition 的指定索引处

PAGComposition.addLayerAt(0);

返回指定索引处存在的子图层

PAGComposition.getLayerAt(0);

将 PAGLayer 添加到当前 PAGComposition 的顶部

PAGComposition.addLayer();

从当前PAG组合中删除指定索引处的PAG层。

pagCompoition.removeLayerAt(0);

从当前PAG组合中删除指定的PAG层。

PAGComposition.removeLayer();

从当前PAG组合中删除所有PAG层。

PAGComposition.removeAllLayers();

返回PAGComposition的子层数。

PAGComposition.numChildren();

接口说明

PAGView

接口名参数返回值说明
Initid: stringvoid初始化配置
setComposition无void设置一个新的PAGComposition，让PAGPlayer作为内容呈现
play无void开始播放接口
pause无void在当前位置暂停动画
resume无void在当前位置继续播放动画
stop无void停止播放
isPlaying无number判断动画是否播放
getState无number获取动画状态
setRepeatCountcount:numbervoid设置动画播放次数
repeatCount无number返回动画播放的总次数
setScaleModemode: numbervoid设置缩放模式
scaleMode无number返回当前缩放模式
setMatrixa: number,b: number,c:number,d:number,tx: number,ty:numbervoid设置矩阵变换
setProgressvalue: numbervoid设置播放的起始帧数
setCacheEnabledvalue: booleanvoid设置cacheEnabled属性的值
cacheEnabled无boolean如果设置为true，PAG渲染器将缓存每个层的静态内容的内部位图表示
setCacheScalevalue: numbervoid设置cacheScale属性的值
cacheScale无boolean该值定义内部图形缓存的比例因子，范围从0.0到1.0
setMaxFrameRatevalue: numbervoid设置帧率
maxFrameRate无number渲染的帧率
setUseDiskCachevalue: booleanvoid设置useDiskCache属性的值
useDiskCache无boolean如果设置为true，PAG将把相关的渲染数据缓存到磁盘文件中，例如视频合成的解码图像帧
getComposition无PAGComposition返回当前PAGView的PAG组合以呈现为内容
getLayersUnderPointlocalX: number,localY: numberPAGLayer[]返回位于指定点下的层数组
setVideoEnabledvalue: booleanvoid设置videoEnabled属性的值
videoEnabled无boolean如果设置为false，PAGView将跳过视频合成的渲染
setPathpath: stringboolean从指定的路径加载一个pag文件，如果该文件不存在或数据不是pag文件，则返回false
getPath无String由setPath（）设置的pag文件的路径字符串
getProgress无number返回播放位置的当前进度，值从0.0到1.0
duration无number当前合成的持续时间（以微秒为单位）
flush无boolean调用此方法可立即渲染当前位置
addPlayStateListenercb: (state: number) => voidnumber添加播放状态的监听
addRepeatCountListenercb: (state: number) => voidnumber添加播放次数的监听
addCurrentFrameListenercb: (state: number) => voidnumber添加对当前帧的监听
removePlayStateListener无void移除播放状态的监听
removeRepeatCountListener无void移除播放次数的监听
removeCurrentFrameListener无void移除对当前帧的监听
freeCache无void立即释放pag视图创建的缓存
matrix无Matrix返回当前矩阵的副本

PAGFile

接口名参数返回值说明
setDurationnumbervoid设置此PAGFile的持续时间
loadFromPathstringPAGFile从指定路径加载pag文件
setStartTimenumbervoid设置图层的开始时间
duration无number该层的持续时间
numImages无number可替换图像的数量
numTexts无number可编辑文本的数量
numVideos无number视频作品的数量
path无String此文件的路径字符串
maxSupportedTagLevel无number标记级别
getEditableIndiceslayerType: numbernumber[]返回此PAGFile中可编辑层的索引
timeStretchMode无number指示当文件的持续时间更改时，如何拉伸原始持续时间以适应目标持续时间
tagLevel无number此pag文件所需的标记级别
setTimeStretchModevalue: numbervoid设置此文件的timeStretchMode。

PAGComposition

接口名参数返回值说明
initwidth: number, height: numbervoid创建一个具有指定大小的空 PAGComposition
addLayerAtindex: numbervoid将 PAGLayer 添加到当前 PAGComposition 的指定索引处
addLayer无void将 PAGLayer 添加到当前 PAGComposition 的顶部
getLayerAtindex: numbervoid返回存在于指定索引处的子层
removeLayer无void从当前 PAGComposition 中删除指定的 PAGLayer
removeAllLayers无void从当前 PAGComposition 中删除所有 PAGLayers
removeLayerAtindex: numbervoid从当前 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  # 安装使用方法

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

司徒南QAQ
关注
  • 16
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
KeyPointsAnd3DSC算法三方库
10-15
“A Fast Point Clouds Registration Algorithm for Laser Scanners”论文复现的KeyPointsAnd3DSC算法，可用来实现点云配准。参考博客链接：https://blog.csdn.net/weixin_43896283/article/details/133840198
C++三方库 PCL1.8.1
12-11
vs2015对应的PCL1.8.1，包括两个文件：PCL-1.8.1-AllInOne-msvc2015-win64.exe、pcl-1.8.1-pdb-msvc2015-win64.zip。
腾讯Libpag动画库研究2（Pag实现原理）
鱼塘鱼汤的专栏
08-23 4305
Pag，动画，Lottie，渲染
HarmonyOS 鸿蒙应用开发(九、还是蓝海，如何贡献第三方库)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
02-04 3648
快来共享第三方库吧，不但可以通过分享自己的成果，可以获得来自全球开发者的技术反馈和建议，提升自身技术能力，还有助于提高个人或团队在开源社区中的知名度和影响力。在流量时代和粉丝经济时代，获得曝光度和流量密码，这太重要了。
OpenHarmony三方库组件：PullToRefresh
situnanQAQ的博客
06-24 764
PullToRefresh是一款OpenHarmony环境下可用的下拉刷新、上拉加载组件
OpenHarmony三方库组件：eventsource
situnanQAQ的博客
06-27 765
eventsource三方库是EventSource客户端的纯JavaScript实现
OpenHarmony三方库组件：CircleImageView
situnanQAQ的博客
06-28 1017
CircleImageView是一个图片处理的库，可以将图片裁剪为圆形或者给图片设置边框。
OpenHarmony三方库组件：APNG
situnanQAQ的博客
06-28 973
使用arkts能力，将每一帧数据组合成imagebitmap........
OpenHarmony三方库组件：WheelPicker
situnanQAQ的博客
06-26 1088
WheelPicker可以实现滚轮选择........
OpenHarmony三方库组件：SmartRefreshLayout
situnanQAQ的博客
06-26 696
smartrefreshlayout以打造一个强大，稳定，成熟的下拉刷新框架为目标，并集成各种的炫酷、多样、实用、美观的Header。
OpenHarmony三方库组件：LargeImage
situnanQAQ的博客
06-28 945
加载可以执行缩放（放大和缩小）和滚动操作的图像，图像放大之后可以拖动查看。
pyautoit-master三方库包
05-12
此包为pyautoit-master三方库的包，可以用来作为python操作Windows窗口的支持库。 使用方法： 1、下载此包，解压，到pyautoit-master目录下打开cmd窗口，离线安装，指令：python setup.py install 2、python调用，...
yaml-cpp三方库源码，版本为0.8.0
04-13
yaml-cpp 是一个功能强大的 C++ 库，用于处理 YAML 数据格式。其源码结构清晰，模块划分合理，易于理解和扩展。库内提供了丰富的 API，包括节点的创建、查询、修改以及文件的读写等，使得开发者能够方便地在 C++ 中...
01 EML_三方组件各级扁平化_
09-30
三方组件的使用可以快速实现这些功能，比如，可能会有专门的库用于实时数据采集、数据分析、报警系统等。扁平化的组件设计可以使各个部分更好地协同工作，降低集成难度，提高系统的整体性能。 文件名"01 EML"可能指...
【HarmonyOS学习】Calendar Kit日历管理
最新发布
包包熊的博客
07-16 489
Calendar Kit为用户提供了一系列接口来获取日历账户，并使用特定的接口向日历账户中写入日程。 如果写入的日程带有提醒时间则系统会在时间到达时向用户发送提醒。
【HarmonyOS学习】动画
包包熊的博客
07-16 270
分类介绍了常用动画的类型，并包含相关示例代码方便学习
玩转鸿蒙NXET之组件导航与路由跳转二
断线的风筝
07-12 918
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。本文将从页面跳转、页面返回、页面返回前增加一个询问框和命名路由几个方面介绍模块提供的功能。页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面。 参数接收 通过调用方法获取Index页面传递过来的自定义参数 页面返回 页面返回 当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到
【HarmonyOS开发】弹窗交互（promptAction ）
包包熊的博客
07-16 395
实现效果点击按钮实现不同方式的弹窗showToast showDialog showActionMenu 代码
使用python内置库或三方库实现：输出列表内所有指定元素的索引值
03-25
可以使用列表的一个内置函数 index() 来获取某个元素的索引值。例如，下面的代码可以输出列表 lst 中所有元素为 'a' 的索引值： lst = ['a', 'b', 'c', 'a', 'd', 'e', 'a'] target = 'a' indices = [i for i, x in enumerate(lst) if x == target] print(indices) 输出结果： [0, 3, 6] 在这段代码中，我们使用了列表推导式来遍历列表 lst 中的所有元素，当某一个元素等于目标元素时，使用 enumerate() 函数获取该元素的索引值，最终将所有符合条件的索引值保存在一个列表中并输出。这段代码可以轻松地适用于任何目标元素和列表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值