HarmonyOS--鸿蒙三方库--lottie

@ohos/lottie

Lottie 是 OpenHarmony 的一个动画库,它可以解析 Adobe After Effects 动画,使用 Bodymovin 导出为 JSON 文件,并在移动设备上本地呈现它们。

使用方法

首先还是使用canvas画布作为基础

复制代码
//画布渲染设置
private setting:RenderingContextSettings=new RenderingContextSettings(true)
//创建context渲染对象
private  context:CanvasRenderingContext2D=new CanvasRenderingContext2D(this.setting)

如果想要一开始就加载动画并进行,可以在onReady回调里去loading

首先创建一个AnimantionItem用来接受lottie动画

复制代码
@State animation_button:AnimationItem|null=null

其次使用lottie的loaing加载动画,这里必须要有的参数为:

  1. 渲染上下文context

  2. 渲染方式:'canvas'

  3. path:这里的文件路径是从ets文件开始

  4. name:用于区分动画

  5. 其他:是否循环播放,自动播放,图像路径,动画初始化区间等

    Canvas(this.context)
    .onReady(()=>{
    this.animation_button=lottie.loadAnmation({
    container: this.context,
    renderer: 'canvas',
    loop: false,
    autoplay: true,
    name: 'like',
    contentMode: 'Contain',
    frameRate: 30,
    imagePath: 'lottie/images/',
    path: 'common/Figma Config Like.json',
    initialSegment: [10,50]
    })
    })

可用api

API Type Description
play() name? Plays the animation.
stop() name? Stops the animation.
pause() name? Pauses the animation.
togglePause() name? Switches the animation playback state between running and paused.
destroy() name? Destroys the animation.
goToAndStop() value, isFrame?, name? Seeks to a certain frame or point of time and then stops the animation.
goToAndPlay() value, isFrame?, name? Seeks to a certain frame or point of time and then starts the animation.
setSegment() init,end Sets an animation segment.
playSegments() arr, forceFlag Plays animation segments.
resetSegments() forceFlag Resets the animation.
setSpeed() speed Sets the playback speed.
setDirection() direction Sets the playback direction.
getDuration() isFrames? Obtains the animation duration.
addEventListener() eventName,callback Adds an event listener.
removeEventListener() name,callback? Removes an event listener.
changeColor() color, layer?, index? Changes the animation color.
setContentMode() contentMode Sets the fill mode.
setFrameRate() frameRate Sets the animation frame rate.

注意事项:

  1. destroy()

这个api多用于在生命周期结束的时候摧毁动画。

  1. 在使用gotoplay的时候,如果和loadAnimation这个函数在同一模块,可能会出现动画未加载完成而使用失效问题,这里需要用监听事件回调搭配使用

    .onReady(()=>{
    lottie.destroy('like')
    this.animation_button=lottie.loadAnimation({
    container: this.context, // Rendering context.
    renderer: 'canvas',
    loop: false,
    autoplay: true,
    name: 'like',
    contentMode: 'Contain',
    frameRate: 30,
    path: 'common/Figma Config Like.json'
    })
    this.animation_button.addEventListener('DOMLoaded',(arg:Object)=>{
    this.animation_button?.goToAndStop(200,false)
    })

  2. 未发现按照时间播放动画区间,在后续点赞案例中使用的是setTimeOut来延时间暂停。

点赞案例

复制代码
lottie_demo 点赞案例  
  Column{
  Canvas(this.context)  
    .height(70)  
    .width(70)  
    //.backgroundColor('#80f1f1f1')  
    .onClick(()=>{  
      if(this.isLogin){  
        this.animation_button?.goToAndPlay(200,false)  
        setTimeout(()=>{  
          this.animation_button?.pause()  
          console.log('暂停动画完成')  
        },1630)  
        this.isLogin=!this.isLogin  
        lottie.clearFileCache()  
      }else{  
        this.animation_button?.goToAndPlay(1770,false)  
        setTimeout(()=>{  
          this.animation_button?.pause()  
        },1990)  
        this.isLogin=!this.isLogin  
        lottie.clearFileCache()  
      }  
    })  
    .onReady(()=>{  
      lottie.destroy('like')  
      this.animation_button=lottie.loadAnimation({  
        container: this.context, // Rendering context.  
        renderer: 'canvas',                          // Rendering mode.  
        loop: false,                                  // Whether to loop the playback. The default value is true.  
        autoplay: true,                              // Whether to enable automatic playback. The default value is true.  
        name: 'like',                                // Animation name.  
        //contentMode: 'Contain',                      // Fill mode.        //frameRate: 30,                               // Set the frame rate to 30.        //imagePath: 'lottie/images/',                 // Load and read images in the specified path.         path: 'common/Figma Config Like.json',                             // JSON file path.  
        //initialSegment: [10,50]      })  
      this.animation_button.addEventListener('DOMLoaded',(arg:Object)=>{  
        this.animation_button?.goToAndStop(200,false)  
      })  
    })  
  Text('点赞案例')  
}  
.width('100%')
相关推荐
爱笑的眼睛1116 小时前
深入浅出ArkTS:HarmonyOS应用开发的现代化语法解析
华为·harmonyos
Kisang.1 天前
【HarmonyOS】窗口管理实战指南
前端·华为·typescript·harmonyos·鸿蒙
犹若故人归1 天前
华为ENSP——OSPF的基本配置实验
华为
it技术1 天前
鸿蒙HarmonyOS实战开发系列课程
harmonyos
●VON1 天前
重生之我在大学自学鸿蒙开发第一天-《基础篇》
学习·华为·harmonyos·鸿蒙
浅蓝色1 天前
flutter平台判断后续
flutter·harmonyos
程序员潘Sir1 天前
鸿蒙应用开发从入门到实战(二十):ArkUI内置弹窗组件
harmonyos·鸿蒙
旺仔Sec1 天前
2025年江西省职业院校技能大赛高职组鸿蒙应用开发赛项竞赛任务书
华为·harmonyos
Georgewu2 天前
【HarmonyOS AI赋能】朗读控件详解
harmonyos