loop设置false ,每次点击调play,第二次再点击 调用play 就不执行动画了,怎么解决?

loop设置false ,每次点击调play,第二次再点击 调用play 就不执行动画了,怎么解决?只能每次点击都要销毁前一个动画重新创建动画吗。(就是实现带有lottie的底部导航栏遇到的问题)


HarmonyOS
2024-11-15 11:42:20
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

下面是一个参考demo。

import lottie from "@ohos/lottie"; 
@Entry 
@Component 
struct Index { 
  @State currentIndex: number = 0; 
  private renderingSettings1: RenderingContextSettings = new RenderingContextSettings(true); 
  private canvasRenderingContext1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings1); 
  private renderingSettings2: RenderingContextSettings = new RenderingContextSettings(true); 
  private canvasRenderingContext2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings2); 
  private renderingSettings3: RenderingContextSettings = new RenderingContextSettings(true); 
  private canvasRenderingContext3: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings3); 
  private tabBarOption1: TabBarOption = { 
    index: 0, 
    text: 'tabbar1', 
    name: 'tab1', 
    path: "common/lottie/tabbar2.json", 
    canvasRenderingContext: this.canvasRenderingContext1 
  } 
  private tabBarOption2: TabBarOption = { 
    index: 1, 
    text: 'tabbar2', 
    name: 'tab2', 
    path: "common/lottie/tabbar3.json", 
    canvasRenderingContext: this.canvasRenderingContext2 
  } 
  private tabBarOption3: TabBarOption = { 
    index: 2, 
    text: 'tabbar3', 
    name: 'tab3', 
    path: "common/lottie/tabbar4.json", 
    canvasRenderingContext: this.canvasRenderingContext3 
  } 
  private data1: string[] = ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录']; 
  private data2: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; 
  private data3: string[] = ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录']; 
  @Builder 
  TabBar(tabBarOption: TabBarOption) { 
    Column() { 
      Canvas(tabBarOption.canvasRenderingContext) 
        .width(60) 
        .height(60) 
        .backgroundColor(Color.White) 
        .onReady(() => { 
          lottie.loadAnimation({ 
            container: tabBarOption.canvasRenderingContext, 
            renderer: 'canvas', 
            loop: false, 
            autoplay: false, 
            name: tabBarOption.name, 
            path: tabBarOption.path, 
          }) 
          this.lottieController(); 
        }) 
      Text(tabBarOption.text) 
        .fontSize(18) 
        .fontColor(this.currentIndex === tabBarOption.index ? '#03c067' : '#999') 
    } 
    .height(100) 
  } 
  build() { 
    Tabs({ barPosition: BarPosition.End }) { 
      TabContent() { 
        List({ space: 20 }) { 
          ForEach(this.data1, (item: string) => { 
            ListItem() { 
              Text(item) 
                .width('100%') 
                .height(150) 
                .fontSize(20) 
                .textAlign(TextAlign.Center) 
                .backgroundColor('#95efd2') 
            } 
          }) 
        } 
        .backgroundColor('#eeeeee') 
        .divider({ strokeWidth: 1, color: 0x222222 }) 
        .edgeEffect(EdgeEffect.None) 
      }.tabBar(this.TabBar(this.tabBarOption1)) 
      TabContent() { 
        List({ space: 20 }) { 
          ForEach(this.data2, (item: string) => { 
            ListItem() { 
              Text(item) 
                .width('100%') 
                .height(150) 
                .fontSize(20) 
                .textAlign(TextAlign.Center) 
                .backgroundColor('#95efd2') 
            } 
          }) 
        } 
        .backgroundColor('#eeeeee') 
        .divider({ strokeWidth: 1, color: 0x222222 }) 
        .edgeEffect(EdgeEffect.None) 
      }.tabBar(this.TabBar(this.tabBarOption2)) 
      TabContent() { 
        List({ space: 20 }) { 
          ForEach(this.data3, (item: string) => { 
            ListItem() { 
              Text(item) 
                .width('100%') 
                .height(150) 
                .fontSize(20) 
                .textAlign(TextAlign.Center) 
                .backgroundColor('#95efd2') 
            } 
          }) 
        } 
        .backgroundColor('#eeeeee') 
        .divider({ strokeWidth: 1, color: 0x222222 }) 
        .edgeEffect(EdgeEffect.None) 
      }.tabBar(this.TabBar(this.tabBarOption3)) 
    } 
    .barHeight(100) 
    .onChange((index: number) => { 
      this.currentIndex = index; 
      this.lottieController(); 
    }) 
  } 
  lottieController() { 
    if (this.currentIndex == 0) { 
      lottie.stop(); 
      lottie.play(this.tabBarOption1.name); 
    } 
    if (this.currentIndex == 1) { 
      lottie.stop(); 
      lottie.play(this.tabBarOption2.name); 
    } 
    if (this.currentIndex == 2) { 
      lottie.stop(); 
      lottie.play(this.tabBarOption3.name); 
    } 
  } 
} 
 
interface TabBarOption { 
  index: number; 
  text: string; 
  name: string; 
  path: string; 
  canvasRenderingContext: CanvasRenderingContext2D; 
}
分享
微博
QQ
微信
回复
2024-11-15 16:48:09
相关问题
class二次刷新渲染数组
736浏览 • 1回复 待解决
HarmonyOS cocos引擎能否二次启动
355浏览 • 1回复 待解决
实现二次侧滑退出应用
1830浏览 • 1回复 待解决
华为账号实时验证/二次放号相关咨询
1732浏览 • 1回复 待解决
荣耀play4t PRO什么时候内侧啊
4868浏览 • 2回复 待解决
荣耀play能升级鸿蒙OS2.0嘛?
5843浏览 • 1回复 待解决