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%')
相关推荐
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶2 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶2 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
万少4 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
coder_pig17 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶18 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
二二孚日19 小时前
自用华为ICT云赛道Big Data第五章知识点-Flume海量日志聚合
大数据·华为
前端世界19 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor20 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
二二孚日21 小时前
自用华为ICT云赛道Big Data第四章知识点-Flink流批一体分布式实时处理引擎
大数据·华为