HarmonyOS 项目实练(三)

跟着官网学习了些HarmonyOS基础，整体感受下来，还是比较容易上手的。今天开始有时间想把之前的一个WIFI & BLE项目，置换成Harmony试试看。仅做些记录。

1. Lottie

功能描述: Lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，
并在移动设备上进行本地渲染，可以在各种屏幕尺寸和分辨率上呈现，并且支持动画的交互性，通过添加触摸事件或其他用户交互操作，使动画更加生动和具有响应性

1.1 导入第三方库 lottie

第三方库导入

注意：此处导入的lottie为静态库，如果要多个module使用，需要多次导入

1.2 lottie使用

1.2.1. 所有lottie json 图片存放位置

common lottie 位置

注意：将Lottie的资源文件data.json文件放置到Entry目录下的common文件夹下(放置本模块中，使用相对路径无法读取)。数据参考politeChicky.json

1.2.2.具体实现

进入页面，通过Canvas的onReady函数加载动画，点击播放动画，动画执行播放，文本刷新。源码参考LotieView.ets

@Component
export struct GuideView {
  private politeChickyController: CanvasRenderingContext2D =
    new CanvasRenderingContext2D(); // CanvasRenderingContext2D对象
  private animateItem: AnimationItem | undefined = undefined; // 初始化loadAnimation接口的返回对象
  private politeChickyPath: string = 'common/lottie/ani_guiding_connectpoweradaptor.json'; // hap包内动画资源文件路径，仅支持json格式

  @ObjectLink item: GuideModel;

  // 页面隐藏销毁动画
  aboutToDisappear(): void {
    // TODO:知识点:页面销毁时需要调用lottie的资源回收
    if (this.animateItem !== undefined) {
      this.animateItem.destroy();
    }
  }
  /**
   * 加载动画
   * @param autoplay 控制动画是否自动播放参数
   */
  initAnimation() {
    // TODO:知识点:lottie.loadAnimation将json数据生成动画
    this.animateItem = lottie.loadAnimation({
      container: this.politeChickyController,
      renderer: 'canvas',
      loop: true,
      autoplay: true,
      // name: this.politeChicky,
      path: politeChickyPath
    })
  }

  build() {
    Column() {
      // 动画
      Canvas(this.politeChickyController)
        .width('100%')
        .height('50%')
        .onReady(() => {
          // TODO:知识点:必须要Canvas组件初始化之后才能执行lottie.loadAnimation方法去加载动画。
          this.initAnimation();
        })
        .onClick(() => {
          this.animateItem?.goToAndPlay(0);
        })
  }
}

2. Swiper

滑块视图容器，提供子组件滑动轮播显示的能力。
Swiper

Swiper

3. Modal 方式

modal

bindSheet

4. 如何采用本地的数据/图片资源

Resource

最后编辑于：2024.12.12 14:07:25