HarmonyOS鸿蒙Next中怎么制作组件向中心收起以至消失的动画？消失之后再冒几个气泡。。。

HarmonyOS鸿蒙Next中怎么制作组件向中心收起以至消失的动画？消失之后再冒几个气泡。。。 提供一下思路和Demo

3 回复

为啥不直接制作动画呢？

更多关于HarmonyOS鸿蒙Next中怎么制作组件向中心收起以至消失的动画？消失之后再冒几个气泡。。。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用ArkUI的animateTo或animation属性实现：将组件scale属性动画至0并居中，结合opacity淡出。动画完成后通过回调或状态变量控制气泡组件（使用List+Image+动画）依次出现。

使用 animateTo 驱动组件向中心缩放消失，配合 opacity；动画结束时切换状态显示气泡，再用 TransitionEffect 或延迟动画让气泡从中心冒出。

@State vanish: boolean = false
@State showBubbles: boolean = false

// 消失动画
animateTo({ duration: 300, curve: Curve.EaseIn }, () => {
  this.vanish = true  // scale & opacity变为0
})

// 监听动画结束，展示气泡
.onFinish(() => {
  this.showBubbles = true
})

// 组件样式
.scale({ x: this.vanish ? 0 : 1, y: this.vanish ? 0 : 1 })
.opacity(this.vanish ? 0 : 1)
.transformOrigin(0.5, 0.5)

// 气泡：循环生成，添加差异化延迟动画
ForEach([1,2,3], (item: number) => {
  Circle()
    .width(20).height(20)
    .opacity(this.showBubbles ? 1 : 0)
    .scale(this.showBubbles ? 1 : 0)
    .animation({ duration: 200, delay: item * 100, curve: Curve.EaseOut })
})
回到顶部