实现效果

使用场景

如3D 卡片翻转：卡片翻转时的场景。

如动态模糊面板，需要整个面板在快速移动时，背景和内容一起模糊，呈现速度感的场景。

再如游戏中带有发光、故障风特效的组合组件场景

实现思路

第一步：创建一个卡片，内部包含高斯模糊背景、图片和文字。做一个多层结构。

第二步：在卡片的最外层容器上添加 .renderGroup(true) 以此来开启 renderGroup。

第三步：在开启了 renderGroup 的容器上，应用 .rotate（X 轴旋转）和 .scale（缩放）

使用renderGroup后效果是应用在整体的图像上，而不是单独的子元素上。

完整实现代码

@Entry
@Component
struct RenderGroupDemo {
  // 卡片的旋转角度
  @State rotateX: number = 0;
  @State rotateY: number = 0;

  // 卡片缩放比例
  @State scaleValue: number = 1.0;

  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 背景网格，用于体现 3D 空间感
      Grid() {
        ForEach(Array.from({ length: 100 }), (item: number) => {
          GridItem() {
            Text('')
              .width('100%')
              .height('100%')
              .border({ width: 0.5, color: '#E0E0E0' })
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr')
      .width('100%')
      .height('100%')

      Column() {
        // 1. 卡片内部内容：图片、文字、背景
        // 这个背景使用了 backdropBlur，如果不开启 renderGroup，旋转时边缘会很难看
        Column() {
          Image($r('app.media.startIcon'))
            .width(80)
            .height(80)
            .borderRadius(40)
            .margin({ top: 40, bottom: 20 })

          Text('HarmonyOS')
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.White)

          Text('3D效果体验')
            .fontSize(16)
            .fontColor('#E0E0E0')
            .margin({ top: 10 })
        }
        .width(260)
        .height(320)
        .padding({ bottom: 30 })
        .borderRadius(20)
        // 模拟复杂的内部模糊背景
        .linearGradient({
          colors: [[0xCC1E90FF, 0.0], [0xCC6A5ACD, 1.0]]
        })
        .justifyContent(FlexAlign.Start)
        .alignItems(HorizontalAlign.Center)
      }
      // true 表示将 Column 及其所有子元素作为一个整体进行渲染
      .renderGroup(true)
      // 应用 3D 旋转和缩放
      .rotate({
        x: this.rotateX,
        y: this.rotateY,
        z: 0,
        angle: ''
      })
      .scale({ x: this.scaleValue, y: this.scaleValue })
      // 增加一点投影，让层级更明显
      .shadow({
        radius: 40,
        color: '#40000000',
        offsetX: 10,
        offsetY: 20
      })
      // 绑定手势
      .gesture(
        PanGesture({ direction: PanDirection.All })
          .onActionUpdate((event: GestureEvent) => {
            // 根据手指移动距离计算旋转角度
            this.rotateY = event.fingerList[0].localX - 180; 
            this.rotateX = -(event.fingerList[0].localY - 320);

            // 稍微放大一点，增加近大远小的感觉
            this.scaleValue = 1.0 + (event.fingerList[0].localY / 1000);
          })
          .onActionEnd(() => {
            // 手势结束，复位动画
            animateTo({ duration: 500, curve: Curve.EaseOut }, () => {
              this.rotateX = 0;
              this.rotateY = 0;
              this.scaleValue = 1.0;
            })
          })
      )

      Text("拖拽卡片体验 3D 效果")
        .fontSize(14)
        .fontColor('#666')
        .position({ x: '50%', y: 80 })
        .translate({ x: '-50%' })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F9F9F9')
  }
}

在HarmonyOS Next中，使用renderGroup实现3D卡片动效主要涉及ArkUI的3D图形能力。renderGroup是用于高性能图形渲染的容器组件。实现步骤通常包括：在自定义组件中创建renderGroup节点，通过其上下文（RenderContext）构建3D变换矩阵（如Matrix4），并应用到子组件上。关键属性包括旋转（rotation）、缩放（scale）和透明度（opacity），可通过状态变量驱动动画。具体代码需在ArkTS中编写，利用动画API（如animateTo）控制这些属性的连续变化，以生成平滑的3D翻转、缩放等动效。