HarmonyOS 鸿蒙Next中如何在List的Item展示时播放动画

HarmonyOS 鸿蒙Next中如何在List的Item展示时播放动画

  1. List正常加载数据，加载完成后指定Item播放一段闪烁动画

  2. 目前使用keyframeAnimateTo，点击时执行正常，但放到aboutToAppear就没有效果

  3. 代码是通过修改背景起到闪烁作用

动画代码：

this.getUIContext().keyframeAnimateTo({
        iterations:5,
        delay:5000,
      },[
        {
          duration:500,
          event:()=>{
            this.highlight = '#D7E7F4'
          }
        },
        {
          duration:500,
          event:()=>{
            this.highlight = Color.Transparent
          }
        },
      ])

核心疑问：

  1. 通过延迟5000ms并未起到什么作用

  2. 如何展示UI时就启动动画，而不需要经过点击


更多关于HarmonyOS 鸿蒙Next中如何在List的Item展示时播放动画的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

要给 item 添加改变颜色的动画？可以试试设置 onApear 回调，在回调中设置

this.highlight

记得在item最后设置 .animation 属性，

更多关于HarmonyOS 鸿蒙Next中如何在List的Item展示时播放动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用ArkTS实现List的Item展示动画可通过onAppear生命周期触发。通过animateTo方法配合状态变量控制动画属性，例如透明度、位移或缩放。示例代码：

@State isAppear: boolean = false

onAppear() {
  this.isAppear = true
}

build() {
  List() {
    ListItem() {
      Column()
        .opacity(this.isAppear ? 1 : 0)
        .animateTo({
          duration: 500,
          curve: Curve.EaseIn
        })
    }
  }
}

动画参数在animateTo中配置，支持透明度、平移等属性变化。

在HarmonyOS Next中，List的Item在展示时播放动画，关键在于确保动画在组件完全挂载后执行。aboutToAppear生命周期可能过早，此时组件尚未完成布局，导致动画不生效。

建议使用onAppear替代aboutToAppear，它会在组件完全显示后触发。同时，延迟播放可通过setTimeout或动画自身的delay参数实现，但需注意动画上下文准备就绪。

修改后的代码示例：

onAppear() {
  setTimeout(() => {
    this.getUIContext().keyframeAnimateTo({
      iterations: 5,
    }, [
      {
        duration: 500,
        event: () => { this.highlight = '#D7E7F4'; }
      },
      {
        duration: 500,
        event: () => { this.highlight = Color.Transparent; }
      },
    ]);
  }, 5000); // 延迟5秒启动
}

若需立即播放，移除setTimeout即可。确保getUIContext()在onAppear中可用，且动画属性（如highlight）已正确绑定到UI。

回到顶部