当前位置：首页 > news >正文

「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用

news 2024/11/5 15:54:06

在鸿蒙应用中，Canvas 组件可以实现丰富的动态效果，适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画，以及性能优化策略。

在这里插入图片描述

关键词

Canvas 组件
动态绘制
动画效果
动态进度条
旋转和缩放
性能优化

一、使用定时器实现动画循环

通过定时更新画布内容，可以让图形在 Canvas 中产生动画效果。setTimeout 方法可用于实现帧刷新，使图形流畅移动。

1.1 动画循环示例：水平移动

以下代码展示了如何在 Canvas 上创建一个自动移动的圆形。

@Entry
@Component
struct MovingCircleExample {private x: number = 0; // 圆心的 x 坐标private dx: number = 5; // 每帧的水平移动距离private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文build() {Column() {Canvas(this.context).width('100%').height(600).onReady(() => {this.animateCircle(); // 开始动画});}}private animateCircle(): void {this.context.clearRect(0, 0, 600, 600); // 清除画布this.context.beginPath(); // 开始新路径this.context.arc(this.x, 300, 50, 0, 2 * Math.PI); // 绘制圆形this.context.fillStyle = '#FF4500'; // 设置填充颜色为橙色this.context.fill(); // 填充圆形this.x += this.dx; // 更新圆心的 x 坐标if (this.x > 600 || this.x < 0) {this.dx = -this.dx; // 碰到边界时反向}// 使用 setTimeout 模拟帧刷新setTimeout(() => this.animateCircle(), 16); // 约60帧每秒}
}