HarmonyOS 鸿蒙Next 日常案例分享之华为闹钟-接上一帖《绘制表盘》，让表盘转动起来~

//设置表盘相关
@Component
export struct CanvasComp {
  //抗锯齿设置
  private setting: RenderingContextSettings = new RenderingContextSettings(true)
  //创建画布实例context
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting)
  //创建ImageBitmap对象  时针,分针,秒针
  private panImg = new ImageBitmap('/images/ic_clock_pan.png')
  private hourImg = new ImageBitmap('/images/ic_hour_pointer.png')
  private minuteImg = new ImageBitmap('/images/ic_minute_pointer.png')
  private secondImg = new ImageBitmap('/images/ic_second_pointer.png')
  //定义画布
  canvasSize = 252
  //时针.分针.秒针对应的宽度
  pointerWidth = 8

  //绘制图像：绘制表盘+设置定时
  startDraw() {
    //开始画图：表盘，时针，分针，秒针
    this.drawClock()
    //设置时间刷新
    setInterval(() => {
      this.drawClock()
    }, 1000)
  }

  drawClock() {
    //清空先前绘图
    this.context.clearRect(0, 0, this.canvasSize, this.canvasSize)

    //绘制表盘
    this.context.drawImage(this.panImg, 0, 0, this.canvasSize, this.canvasSize)

    //获取系统时间
    const date = new Date()
    const hour = date.getHours() + date.getMinutes() / 60 //获取系统小时
    const minute = date.getMinutes() //获取系统分钟
    const second = date.getSeconds() //获取系统秒

    //绘制时针
    this.drawPointer(this.hourImg, 360 * 1 / 12 * (hour % 12))
    //绘制分针
    this.drawPointer(this.minuteImg, 360 * 1 / 60 * minute)
    //绘制秒针
    this.drawPointer(this.secondImg, 360 * 1 / 60 * second)
  }

  drawPointer(img: ImageBitmap, angle: number = 0) { //定义绘制通用方法

    //绘制表针
    this.context.save() //保存
    //绘制旋转顶点
    this.context.translate(this.canvasSize / 2, this.canvasSize / 2)
    // 画布，图像旋转
    this.context.rotate((180 + angle) * Math.PI / 180)
    //设置旋转中心
    this.context.translate(-this.pointerWidth / 2, -this.canvasSize / 2)
    //绘制表针
    this.context.drawImage(img, 0, 0, this.pointerWidth, this.canvasSize)
    //设置旋转中心
    this.context.translate(this.canvasSize / 2, this.canvasSize / 2)
    this.context.restore() //重置
  }

  build() {
    Canvas(this.context)
      .width(this.canvasSize)
      .aspectRatio(1)
      .backgroundColor('#CCC')
      .onReady(() => {
        this.startDraw()
      })
  }
}

更多关于HarmonyOS 鸿蒙Next 日常案例分享之华为闹钟-接上一帖《绘制表盘》，让表盘转动起来~的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 1楼•10 天前

在HarmonyOS鸿蒙Next中实现表盘转动的功能，可以通过使用Canvas组件和动画API来完成。首先，在绘制表盘的基础上，通过Canvas的rotate方法来旋转表盘。具体步骤如下：

创建Canvas对象：在页面中创建一个Canvas对象，并获取其上下文。
绘制静态表盘：使用Canvas的绘图方法（如drawLine、drawCircle等）绘制表盘的静态部分，包括刻度、数字等。
定义旋转动画：使用鸿蒙的动画API（如Animator）来定义表盘的旋转动画。可以通过设置旋转角度、持续时间、插值器等参数来控制动画效果。
更新Canvas：在动画的每一帧中，使用rotate方法更新Canvas的旋转角度，并重新绘制表盘。
启动动画：调用动画的start方法，使表盘开始旋转。

以下是一个简化的代码示例：

import { Canvas, CanvasRenderingContext2D } from '@ohos/canvas';
import { Animator } from '@ohos/animator';

// 创建Canvas对象
const canvas = new Canvas();
const ctx = canvas.getContext('2d');

// 绘制静态表盘
function drawClockFace() {
    // 绘制刻度、数字等
}

// 定义旋转动画
const animator = new Animator({
    duration: 1000, // 动画持续时间
    iterations: Infinity, // 无限循环
    easing: 'linear', // 线性插值
    onUpdate: (progress) => {
        // 更新旋转角度
        const angle = progress * 360;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(angle * Math.PI / 180);
        drawClockFace();
        ctx.restore();
    }
});

// 启动动画
animator.start();

nodeper 2楼•10 天前

在HarmonyOS（鸿蒙Next）中，实现华为闹钟表盘的动态效果，可以通过以下步骤完成：

动画定义：使用Animator或Animation类定义表盘的旋转动画。
属性设置：设置动画的持续时间、旋转角度等属性。
启动动画：在表盘初始化或特定事件触发时启动动画。
回调处理：通过动画回调函数处理动画结束后的逻辑，如重复播放或停止。

例如，使用ObjectAnimator实现表盘旋转：

ObjectAnimator animator = ObjectAnimator.ofFloat(view, "rotation", 0f, 360f);
animator.setDuration(2000);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.start();

通过这种方式，可以让表盘持续旋转，增强用户体验。