ArkUI 动画效果：模糊、阴影和透明度别乱炫

今天我们把几个视觉效果组合起来，但只做一点点。

opacity、shadow、blur、scale、rotate 都能让页面更有层次，也都很容易做过头。这个 Demo 的思路是：让背景柔一点，让重点卡片更明确，而不是把每个属性都调到最大。

这个 Demo 看什么

页面里有一张重点卡片和一个背景光斑。点击按钮后：

• 背景光斑增加 blur 和透明度变化。
• 重点卡片增加阴影和轻微缩放。
• 旋转只给 3 度，避免页面晃。
• 所有变化用同一段 animation 承接。

你可以把它当成一个提醒：效果不是越多越好，能把重点带出来就够了。

完整代码

@Entry
@Component
struct ArkUIAnimationEffectDemo {
  @State activeEffect: boolean = false;

  @Builder
  HeaderBlock() {
    Column({ space: 8 }) {
      Text('ArkUI 动画效果')
        .fontSize(28)
        .fontWeight(700)
        .fontColor('#111827')
      Text('模糊、阴影和透明度别乱炫')
        .fontSize(16)
        .fontColor('#4B5563')
      Text('效果类动画很容易做过头。我们只组合透明度、阴影、模糊、缩放和旋转，看它们怎样服务重点。')
        .fontSize(14)
        .fontColor('#6B7280')
        .lineHeight(22)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 22 }) {
        this.HeaderBlock()

        Stack({ alignContent: Alignment.Center }) {
          Text('')
            .width(220)
            .height(126)
            .borderRadius(24)
            .backgroundColor('#BFDBFE')
            .blur(this.activeEffect ? 8 : 0)
            .opacity(this.activeEffect ? 0.72 : 0.4)
            .scale({ x: this.activeEffect ? 1.12 : 1, y: this.activeEffect ? 1.12 : 1 })
            .animation({ duration: 420, curve: Curve.EaseInOut })

          Column({ space: 8 }) {
            Text('重点卡片')
              .fontSize(24)
              .fontWeight(700)
              .fontColor('#FFFFFF')
            Text(this.activeEffect ? '效果打开，但信息仍然清楚' : '轻点按钮看看变化')
              .fontSize(13)
              .fontColor('#DBEAFE')
          }
          .width(210)
          .height(132)
          .borderRadius(24)
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#2563EB')
          .opacity(this.activeEffect ? 1 : 0.88)
          .rotate({ angle: this.activeEffect ? 3 : 0 })
          .scale({ x: this.activeEffect ? 1.04 : 1, y: this.activeEffect ? 1.04 : 1 })
          .shadow({
            radius: this.activeEffect ? 22 : 6,
            color: this.activeEffect ? '#402563EB' : '#1A000000',
            offsetX: 0,
            offsetY: this.activeEffect ? 14 : 4
          })
          .animation({ duration: 420, curve: Curve.EaseInOut })
        }
        .width('100%')
        .height(260)
        .borderRadius(20)
        .backgroundColor('#F8FAFC')
        .border({ width: 1, color: '#E5E7EB' })

        Button(this.activeEffect ? '收起效果' : '打开效果')
          .height(42)
          .fontSize(14)
          .fontColor('#FFFFFF')
          .backgroundColor('#111827')
          .borderRadius(21)
          .padding({ left: 18, right: 18 })
          .onClick(() => {
            this.activeEffect = !this.activeEffect;
          })

        Text('这里的重点不是“能加多少效果”，而是只让用户看清重点。模糊和阴影适合拉开层级，旋转和缩放要轻，不然页面会显得晃。')
          .width('100%')
          .padding(16)
          .borderRadius(16)
          .backgroundColor('#F8FAFC')
          .fontSize(14)
          .fontColor('#4B5563')
          .lineHeight(22)
      }
      .width('100%')
      .padding(24)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}