Lottie 怎么实现路径播放 HarmonyOS 鸿蒙Next

Lottie 怎么实现路径播放 HarmonyOS 鸿蒙Next lottie 动画怎么实现 像Android里面提供的KeyPath 类 指定播放的图层，形状组

2 回复

参考官网demo，验证可行，使用path：

import lottie, { AnimationItem } from '@ohos/lottie';

@Entry
@Component
struct Index {
@State animationDuration: string = '获取动画时长'
@State pauseState: string = '判断当前动画是否正在运行'
@State isCanvasVisible: Visibility = Visibility.Visible;
private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)
private animateItem2: AnimationItem | null = null;

aboutToDisappear(): void {
console.info('aboutToDisappear');
lottie.destroy();
}

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Row({ space: 10 }) {
Canvas(this.canvasRenderingContext)
.width('45%')
.height(200)
.backgroundColor(Color.Gray)
.onReady(() => {
this.animateItem2?.resize();
})
.onDisAppear(() => {
lottie.destroy("2016");
})
}

Row() {
Button('加载2016')
.onClick(() => {
if (this.animateItem2 == null) {
this.animateItem2 = lottie.loadAnimation({
container: this.canvasRenderingContext,
renderer: 'canvas', // canvas 渲染模式
loop: true,
autoplay: true,
name: '2016',
contentMode: 'Contain',
path: "common/lottie/data.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
})
}
})
.margin({ top: 5 })
}
.width('100%')
.height('100%')
}
}

更多关于Lottie 怎么实现路径播放 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Lottie库可以通过LottieAnimationView组件来实现路径播放。Lottie是一个用于解析和渲染After Effects动画的开源库，支持JSON格式的动画文件。

  1. 导入Lottie库：首先需要在项目中引入Lottie库。在build.gradle文件中添加依赖：

    implementation 'com.airbnb.android:lottie:4.2.0'

  2. 加载动画资源：将Lottie动画的JSON文件放置在resources/base/media目录下。在代码中通过LottieAnimationView加载动画资源：

    let lottieView = findComponentById<LottieAnimationView>(this, 'lottie_view');
lottieView.setAnimation('your_animation.json');

  3. 路径播放：Lottie动画默认是从头到尾播放。如果需要实现路径播放，可以通过setProgress方法来控制动画的播放进度。例如，从某个特定进度开始播放：

    lottieView.setProgress(0.5); // 从50%的进度开始播放
lottieView.playAnimation();

  4. 自定义路径：如果需要自定义播放路径，可以通过addAnimatorUpdateListener监听动画的更新，并在回调中根据进度执行自定义逻辑：

    lottieView.addAnimatorUpdateListener((animator) => {
    let progress = animator.getAnimatedFraction();
    // 根据progress执行自定义路径逻辑
});

  5. 控制动画：可以通过pauseAnimation、resumeAnimation、cancelAnimation等方法控制动画的播放状态。

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现Lottie动画的路径播放。

回到顶部