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%')
相关推荐
SuperHeroWu79 小时前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
Georgewu9 小时前
【HarmonyOS】ArkUI-X 跨平台框架入门详解(一)
harmonyos
SuperHeroWu79 小时前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
Georgewu9 小时前
【HarmonyOS】ArkUI-X一套代码跑多端的跨平台方案概念详解
harmonyos
ins_lizhiming13 小时前
【人工智能】华为昇腾NPU-Vllm Ascend部署及镜像制作
人工智能·pytorch·华为·语言模型·自然语言处理
zhanshuo13 小时前
HarmonyOS NEXT 智能场景识别实战:让设备主动思考的关键技术揭秘
harmonyos
zhanshuo17 小时前
HarmonyOS分布式能力全解析:手机一放下,音箱自动响起!
harmonyos
zhanshuo17 小时前
基于HarmonyOS的智能灯光控制系统设计:从定时触发到动作联动全流程实战
harmonyos
weixin_5412999418 小时前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
Georgewu19 小时前
【HarmonyOS】元服务概念详解
harmonyos