HarmonyOS--鸿蒙三方库--lottie

@ohos/lottie

使用方法
可用api
点赞案例

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加载动画,这里必须要有的参数为：

渲染上下文context
渲染方式：'canvas'
path：这里的文件路径是从ets文件开始
name:用于区分动画
其他：是否循环播放，自动播放，图像路径，动画初始化区间等

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.

注意事项：

destroy()

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

在使用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)
})
未发现按照时间播放动画区间，在后续点赞案例中使用的是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%')