HarmonyOS 鸿蒙Next动效图标

HarmonyOS 鸿蒙Next动效图标

如何实现这种能够波动变化的图标 cke_307.png cke_503.png


更多关于HarmonyOS 鸿蒙Next动效图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

可以使用@ohos/lottie

lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染。

库及使用文档地址： [@ohos/lottie](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie)

更多关于HarmonyOS 鸿蒙Next动效图标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是之前的一个Demo,楼主可以参考以下

@Component
struct WaveCanvas {
  private phase: number = 0;  // 相位偏移量

  build() {
    Canvas()
      .onReady((ctx: CanvasRenderingContext2D) => {
        this.drawWave(ctx);
      })
  }

  drawWave(ctx: CanvasRenderingContext2D) {
    ctx.clearRect(0, 0, 200, 200);
    ctx.beginPath();
    ctx.moveTo(0, 100);
    // 绘制正弦波路径
    for (let x = 0; x <= 200; x++) {
      const y = 100 + Math.sin(x * 0.05 + this.phase) * 30;
      ctx.lineTo(x, y);
    }
    ctx.strokeStyle = '#0000FF';
    ctx.stroke();
    
    // 更新相位并循环绘制
    this.phase += 0.1;
    requestAnimationFrame(() => this.drawWave(ctx));
  }
}
  1. 使用动画库 [@ohos/lottie](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie “OpenHarmony三方库中心仓”)
  2. 让UX做gif图
  3. 自己在本地画

更推荐让UI来出图，如果要结合代码来控制速度或动画效果的话最好使用[@ohos/lottie](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie “OpenHarmony三方库中心仓”)画

1、使用三方库： spinkit 2、让UI做一个 gif 图 3、给截图让AI写

可以使用lottie库

https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

https://lottiefiles.com/free-animations/sound

使用帧动画/动画/gif图

鸿蒙Next的动效图标基于ArkUI框架实现，使用声明式开发范式。主要技术点包括：

  1. 使用Canvas组件绘制矢量图形
  2. 通过属性动画（animation属性）实现变换效果
  3. 支持关键帧动画（keyframes语法）
  4. 可结合手势事件触发交互动效
  5. 采用高效的图形渲染管线

典型实现代码结构包含：

  • UI描述部分（.ets文件）
  • 动画参数配置
  • 交互事件绑定
  • 性能优化标记

动效资源需符合鸿蒙设计规范，建议使用px单位确保多设备适配。

在HarmonyOS Next中实现动态波动图标效果，可以通过以下方式：

  1. 使用Lottie动画：
  • 将波动效果制作成Lottie JSON动画文件
  • 使用ArkUI的Lottie组件加载动画
  • 示例代码：
Lottie({
  src: $rawfile('wave_animation.json'),
  autoPlay: true,
  loop: true
})
  1. 使用Canvas绘制：
  • 创建Canvas组件
  • 通过定时器更新波浪路径
  • 使用贝塞尔曲线实现平滑波动效果
  • 示例代码片段：
Canvas(this.context)
  .onReady(() => {
    // 绘制波浪路径
    this.drawWave();
  })
  1. 关键实现要点：
  • 控制波形的振幅和频率参数
  • 使用requestAnimationFrame实现流畅动画
  • 考虑性能优化，避免过度重绘
  1. 状态管理：
  • 通过@State装饰器管理动画状态
  • 可以响应系统主题变化或用户交互

这种效果适合用于系统状态指示、加载动画等场景，能显著提升界面活力。实现时要注意保持60fps的流畅度，并做好不同设备尺寸的适配。

回到顶部