HarmonyOS鸿蒙Next中时钟这种边缘凸起效果怎么实现的？

HarmonyOS鸿蒙Next中时钟这种边缘凸起效果怎么实现的？ 系统时钟的秒表里的这时钟边缘有种浮雕凸起效果，这种边缘效果是啥？怎么实现？

cke_162.png


更多关于HarmonyOS鸿蒙Next中时钟这种边缘凸起效果怎么实现的？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

非得用代码实现么？ 旁门左道：找UI要个图，代码只做指针效果。😀

更多关于HarmonyOS鸿蒙Next中时钟这种边缘凸起效果怎么实现的？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


shadow shadow(value: ShadowOptions | ShadowStyle): T

为组件添加阴影效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 ShadowStyle类型。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

目前仅元服务支持，不知道可否在应用内正常引用

shadow

shadow(value: ShadowOptions | ShadowStyle): T

为组件添加阴影效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 ShadowStyle类型。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value ShadowOptions | ShadowStyle 是 为当前组件添加阴影效果。
入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
入参类型为ShadowStyle时，可指定不同阴影样式。

返回值：

类型 说明
T 返回当前组件。

Demo：

// xxx.ets
@Entry
@Component
struct UseShadowBatchingExample {
  build() {
    Column() {
      Column({ space: 10 }) {
        Stack() {
        }
        .width('90%')
        .height(50)
        .margin({ top: 5 })
        .backgroundColor(0xFFE4C4)
        .shadow({
          radius: 120,
          color: Color.Green,
          offsetX: 0,
          offsetY: 0
        })
        .align(Alignment.TopStart)
        .shadow({
          radius: 120,
          color: Color.Green,
          offsetX: 0,
          offsetY: 0
        })
        Stack() {
        }
        .width('90%')
        .height(50)
        .margin({ top: 5 })
        .backgroundColor(0xFFE4C4)
        .align(Alignment.TopStart)
        .shadow({
          radius: 120,
          color: Color.Red,
          offsetX: 0,
          offsetY: 0
        })
        .width('90%')
        .backgroundColor(Color.White)
        Column() {
          Text()
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .borderRadius(10)
        .backgroundColor(0xf56c6c)
        .shadow({
          radius: 300,
          color: Color.Yellow,
          offsetX: 0,
          offsetY: 0
        })
        Column() {
          Text()
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .backgroundColor(0x67C23A)
        .borderRadius(10)
        .translate({ y: -50 })
        .shadow({
          radius: 220,
          color: Color.Blue,
          offsetX: 0,
          offsetY: 0
        })
      }
      .useShadowBatching(true)
    }
    .width('100%').margin({ top: 5 })
  }
}

cke_2953.png

看着不太像的样子呢，

我知道的是css里有类似的效果，但目前还不知道鸿蒙开发或者相关时钟组件是否允许自定义设置。。。

HarmonyOS Next中时钟边缘凸起效果实现

HarmonyOS Next中时钟边缘凸起效果主要通过ArkUI的Canvas组件绘制实现。具体步骤包括：

  1. 使用CanvasRenderingContext2D的arc方法绘制圆形表盘
  2. 通过createLinearGradient创建径向渐变实现立体光影
  3. 采用shadowBlur和shadowOffset属性添加投影增强立体感
  4. 结合beginPath和closePath控制绘制路径
  5. 使用fill方法填充渐变颜色完成凸起视觉效果

关键代码涉及Canvas的绘图API调用，通过多层渐变叠加和阴影参数调整达到边缘凸起的立体效果。

这种边缘凸起效果在UI设计中通常称为内阴影（Inner Shadow） 或浮雕（Emboss）效果，用于模拟光线从特定角度照射产生的立体感。

在HarmonyOS Next中，可以通过ArkUI的组件样式属性实现，核心是阴影（shadow） 与背景模糊（backgroundBlur） 的组合。

实现原理分析

从图片看，效果主要包含两部分：

  1. 顶部/左侧边缘的亮部：模拟光线照射的凸起高光。
  2. 底部/右侧边缘的暗部：模拟背光面的阴影。

这可以通过为一个元素设置多重内阴影来模拟。

核心代码示例（ArkTS）

以类似时钟表盘的圆形组件为例，使用Stack容器叠加两个圆形，通过阴影属性实现凸起边缘。

@Component
struct EmbossClockEdge {
  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 底层：深色基底，用于承载内阴影
      Circle({
        width: 300,
        height: 300
      })
      .fill(Color.Black) // 基底颜色
      .shadow({
        radius: 20, // 阴影模糊半径
        color: Color.White, // 亮部阴影颜色（模拟高光）
        offsetX: -4, // 水平偏移（负值向左）
        offsetY: -4  // 垂直偏移（负值向上）
      })
      .shadow({
        radius: 20,
        color: Color.Gray, // 暗部阴影颜色（模拟阴影）
        offsetX: 4, // 水平偏移（正值向右）
        offsetY: 4  // 垂直偏移（正值向下）
      })

      // 上层：实际内容（如刻度、指针）
      Circle({
        width: 280,
        height: 280
      })
      .fill('#1A1A1A') // 稍浅于基底的颜色，增强立体对比
    }
    .width('100%')
    .height('100%')
  }
}

关键属性说明

  • shadow：ArkUI的阴影样式属性，通过设置不同的offsetX、offsetY和color，可以模拟光线从左上角照射的效果。
    • 亮部阴影：使用浅色（如白色），并向左上偏移（负值）。
    • 暗部阴影：使用深色（如灰色），并向右下偏移（正值）。
  • radius：控制阴影的模糊程度，值越大边缘过渡越柔和。
  • 颜色与层级：通过Stack叠加多层，底层使用深色基底承载阴影，上层放置实际内容，可增强立体感的真实性。

调整技巧

  • 若需更强烈的凸起感，可增大offsetX、offsetY的绝对值，或减小radius使边缘更锐利。
  • 可通过backgroundBlur为底层添加轻微背景模糊，使光影融合更自然。
  • 光照角度可通过调整offsetX、offsetY的正负值组合改变（例如左上光照：亮部offsetX: -n, offsetY: -n，暗部offsetX: n, offsetY: n）。

此方法利用纯样式属性实现，无需自定义绘制，性能较好且适配不同屏幕密度。

回到顶部