HarmonyOS 鸿蒙Next中list实现类似通知消息删除的消散动画

HarmonyOS 鸿蒙Next中list实现类似通知消息删除的消散动画 如题，怎么实现，既然系统都可以，那么应该是可以实现的。

8 回复

尊敬的开发者，您好！请问您是在什么样的业务场景中使用该能力，交互流程是怎样的，在哪一个环节遇到了问题？方便说明能力不满足可能带来的影响：什么时间用到？是否高频？有无三方库可以做到？若提供该能力，是否会造成大工作量返工？请您注意提供的内容不要包含您或第三方的非公开信息，如给您带来不便，敬请谅解。

更多关于HarmonyOS 鸿蒙Next中list实现类似通知消息删除的消散动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


一、核心实现代码（可直接复制运行）

实现 “渐隐 + 缩小 + 左滑删除” 的系统通知同款消散动画：

ets

@Entry
@Component
struct NoticeList {
  @State noticeList: string[] = ["通知1", "通知2", "通知3", "通知4"];

  build() {
    List({ space: 10 }) {
      ForEach(this.noticeList, (item: string, index: number) => {
        ListItem() {
          // 通知卡片
          Row() {
            Text(item)
              .fontSize(16)
              .flexGrow(1)
            Button("删除")
              .onClick(() => {
                // 触发删除动画
                animateTo({
                  duration: 250,
                  curve: Curve.EaseOut
                }, () => {
                  this.noticeList.splice(index, 1);
                });
              })
              .backgroundColor('#ff4d4f')
              .fontColor(Color.White)
          }
          .width('100%')
          .height(60)
          .padding(12)
          .backgroundColor('#f5f5f5')
          .borderRadius(12)
        }
        // 关键：消散动画配置（删除时的渐隐+缩小效果）
        .transition({
          type: TransitionType.Delete,
          opacity: 0,
          scale: { x: 0.9, y: 0.9 },
          translate: { x: 20 } // 可选：配合右滑消失效果
        })
      }, (item: string) => item)
    }
    .width('100%')
    .padding(15)
  }
}

二、关键说明

  1. 触发方式：点击 “删除” 按钮，通过 animateTo 包裹数组删除操作，触发 ListItem 的 Delete 类型 transition 动画。
  2. 动画效果：删除时自动执行 透明度 1→0 + 尺寸 1→0.9 + 轻微位移，完全匹配系统通知消散效果。
  3. 扩展支持：可配合 ListItemSwipeAction 实现左滑删除，动画逻辑完全通用。

三、有效官方文档链接

cke_158.jpeg

我指的是这种通知消息移除的，烟雾效果。

兄弟找到了吗，我也在找没找到

参考一下此篇官方文档：LazyForEach实现删除item动画效果；看看满足需求不

那个只有移除动画，我说的是消散，就像灰飞那种，

在HarmonyOS 鸿蒙Next中，可使用List组件配合animateTo实现消散动画。删除时，通过animateTo改变item的opacity和scale属性，例如设为透明度0、缩放0.8，并指定duration和curve。动画结束后再删除数据源对应项。若需滑动触发，可结合SwipeAction组件或手势识别实现渐进消散。

在HarmonyOS Next中，List组件不提供内建的粒子消散动画，但可以通过组合属性动画模拟类似效果。核心思路是：在确认删除时，对目标ListItem执行一个缩放、透明度及轻微位移的过渡动画，动画结束后再移除数据项，视觉上呈现“消散”感。

实现简例（ArkUI）

@Entry
@Component
struct NotificationList {
  @State messages: Array<{ id: number; text: string; deleting: boolean }> = [
    { id: 1, text: '通知1', deleting: false },
    { id: 2, text: '通知2', deleting: false },
  ];

  build() {
    List() {
      ForEach(this.messages, (item, index) => {
        ListItem() {
          Row() {
            Text(item.text)
              .width('80%')
            Button('删除')
              .onClick(() => this.startDelete(index))
          }
          .width('100%')
          .opacity(item.deleting ? 0 : 1)
          .scale({ x: item.deleting ? 0.3 : 1, y: item.deleting ? 0.3 : 1 })
          .translate({ y: item.deleting ? -20 : 0 })     // 可加位移模拟散落
          .animation({ duration: 300, curve: Curve.EaseIn })
        }
        .backgroundColor(Color.White)
        .margin({ top: 8 })
        .borderRadius(12)
      }, (item) => item.id.toString())
    }
    .width('100%')
    .padding(16)
  }

  startDelete(index: number) {
    if (this.messages[index].deleting) return;
    // 触发动画
    this.messages[index].deleting = true;
    // 动画完成后移除数据
    setTimeout(() => {
      this.messages.splice(index, 1);
      this.messages = [...this.messages]; // 触发刷新
    }, 320); // 比动画时长稍长，避免闪烁
  }
}

要点说明

  • 利用 @State 标记每个列表项的删除状态，通过 .animation() 绑定属性变化。
  • 设定 scale 缩至0.3、opacity 变0，配合 translate 上移，模拟消散。
  • 动画时长300ms，setTimeout 延时320ms移除数据，避免动画未完成列表提前回缩。
  • 若需更真实的粒子效果，可额外用 Canvas 绘制碎片扩散，但上述简例已能覆盖多数“通知删除”场景。
回到顶部