HarmonyOS 鸿蒙Next中list删除条目时，如何添加动画效果

HarmonyOS 鸿蒙Next中list删除条目时，如何添加动画效果您好，list列表删除条目时，需要添加个从右向左移除的一个动画，如何添加设置呢？目前删除条目，不使用自带的左滑删除，而是我们自己添加的按钮，点击按钮删除。

关于动画可参考: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-explicit-animation-V5

可按照下面代码修改验证，只列举核心代码

//获取屏幕宽度
aboutToAppear(): void {
  for (let i = 0; i < 10; i++) {
    let obj = new SinglePlatformBean()
    //通过这个值在刷新UI
    obj.is_completed = 1 //1是待办， 2是已办
    obj.id = i
    obj.title = i + ''
    obj.poiLeft = 0
    obj.cordovaid = ''
    this.singlePlatfroms.push(obj)
  }
  let displayInfo = display.getDefaultDisplaySync()
  this.screenWidth = displayInfo.width
  console.log('width----',this.screenWidth)
}

//1.首先在model增加位置信息，然后布局中添加该position，后续用作动画使用
[@Observed](/user/Observed)
class SinglePlatformBean{
  poiLeft:number = 0
  constructor() {
  }
}

build() {
  Column() {
    RelativeContainer() {
      Column() {
      }
    }
  }
  .position({left: this.singlePlatfrom.poiLeft})
}

// 2.在dialog回调事件中，找到点击的item，进行动画和数据更新
onConfirm() {
  if (this.dialogController != undefined) {
    this.dialogController.close()
  }
  animateTo({ duration: 500,onFinish: () => {
    console.info('play end')
    let obj: SinglePlatformBean | undefined = this.singlePlatfroms.find((item)=>{return item.id == this.platFormId})
    if (obj != undefined) {
      console.log('item----',JSON.stringify(obj))
      console.log('item----',this.singlePlatfroms.indexOf(obj))
      this.singlePlatfroms.splice(this.singlePlatfroms.indexOf(obj), 1)
    }
  }}, () => {
    let obj: SinglePlatformBean | undefined = this.singlePlatfroms.find((item)=>{return item.id == this.platFormId})
    if (obj) {
      obj.poiLeft = -this.screenWidth
    }
  })
}

更多关于HarmonyOS 鸿蒙Next中list删除条目时，如何添加动画效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 2楼•8 天前

在HarmonyOS鸿蒙Next中，删除列表条目时添加动画效果可以通过ListContainer和Animator组件实现。首先，在ListContainer的ItemProvider中，通过onItemRemoved方法监听条目删除事件。接着，使用Animator组件定义动画效果，如透明度渐变或平移。通过AnimatorValue设置动画的起始值和结束值，并在onAnimationUpdate回调中更新条目视图的动画属性。最后，调用start方法启动动画。示例代码如下：

import { ListContainer, Animator, AnimatorValue } from '@ohos.animator';

class MyItemProvider extends ListContainer.ItemProvider {
  onItemRemoved(index: number) {
    const itemView = this.getItemView(index);
    const animator = new Animator({
      duration: 300,
      curve: 'easeInOut'
    });

    const animatorValue = new AnimatorValue(1, 0);
    animatorValue.onUpdate((value) => {
      itemView.setAlpha(value);
    });

    animator.addAnimatorValue(animatorValue);
    animator.start(() => {
      // 动画结束后移除条目
      this.removeItem(index);
    });
  }
}

通过这种方式，可以在删除列表条目时实现平滑的动画效果。

bupafengyu 3楼•8 天前

在HarmonyOS鸿蒙Next中，为List删除条目添加动画效果，可以使用ListContainer的deleteItem方法，并结合Animator实现。首先，创建一个Animator对象定义动画效果，如透明度或位移变化。然后，在删除条目时，调用deleteItem并传入动画对象。例如：

Animator animator = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f);
animator.setDuration(300);
listContainer.deleteItem(position, animator);

这样，删除条目时会有渐隐动画效果。