HarmonyOS鸿蒙Next中listContainer加载动画制作(实验性 意思并不稳定)

HarmonyOS鸿蒙Next中listContainer加载动画制作(实验性 意思并不稳定) 最近想给list添加动画,于是试着做了一下,我们先看效果

可以看到 item是从左进入屏幕的,但是并不稳定,我在这里说一下我的实现方式:

Provider里面声明AnimatorProperty

private AnimatorProperty animatorProperty;

getComponent方法里面设置属性动画

@Override
public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
    final Component cpt;
    if (convertComponent == null) {
        cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_text, null, false);
    } else {
        cpt = convertComponent;
    }
    animatorProperty = cpt.createAnimatorProperty();
    animatorProperty.moveFromX(-3000).moveToX(0).setDelay(100).setDuration(2000).setLoopedCount(0);
    SampleItem sampleItem = list.get(position);
    Text text = (Text) cpt.findComponentById(ResourceTable.Id_text);
    text.setText(sampleItem.getStr());
    return cpt;
}

同时在listContainer.addItemVisibilityChangedListener里面启动动画

listContainer.addItemVisibilityChangedListener(new ListContainer.ItemVisibilityChangedListener() {
    @Override
    public void onItemAdded(Component component, int i) {
        sampleItemProvider.getAnimatorProperty().start();
    }
    @Override
    public void onItemRemoved(Component component, int i) {
        sampleItemProvider.getAnimatorProperty().start();
    }
});

这种方法效果并不好,只是提供一种思路,如果有更好的方案也欢迎大家评论交流


更多关于HarmonyOS鸿蒙Next中listContainer加载动画制作(实验性 意思并不稳定)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

谢谢楼主分享

更多关于HarmonyOS鸿蒙Next中listContainer加载动画制作(实验性 意思并不稳定)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


也可以相互交流一下经验的

在HarmonyOS鸿蒙Next中,可以通过ListContainer组件实现列表加载动画。虽然目前处于实验性阶段,稳定性有待验证,但仍可通过以下步骤实现:

  1. 自定义加载动画:使用AnimatorPropertyAnimationController创建自定义动画效果。
  2. 绑定动画到ListContainer:在ListContaineronItemBindonItemAdded方法中,将动画绑定到列表项。
  3. 控制动画播放:通过startstop方法控制动画的播放与停止。

由于处于实验性阶段,建议在实际应用中充分测试,并关注官方更新以获取更稳定的实现方案。

回到顶部