您的位置:

Android Lottie:全面解析动画工具

Android Lottie是一款开源的动画库,旨在简化开发人员在Android中使用体验卓越的动画效果。本文将从多个方面详细阐述Android Lottie的特点和用法。

一、入门指南

1、Android Lottie是什么?

Android Lottie是一款开源的动画库,可以将Adobe After Effects的高级动画转换为本地可执行代码,实现在移动设备上无缝展示。可以使用它来创建流畅、高效、可控制的动画效果。它基于Json格式,可跨平台(Android、iOS、Web等)使用。

2、为什么选择使用Android Lottie?

使用Android Lottie可以让你轻松创建并实现复杂的动画,无需再绞尽脑汁开发海量API。同时,它支持各种动画效果,且动画质量非常高。Lottie是一个优秀的动画实现框架,可以极大地提高开发效率。

3、如何引入Lottie?

dependencies {
    implementation ‘com.airbnb.android:lottie:$lottieVersion’ //Lottie版本号
}

4、如何开始使用Lottie?

使用Lottie可以直接使用播放的json文件来展示动画效果。首先,获取需要展示的动画文件(可以从Lottie Animation的网站下载),将下载下来的JSON文件存储在应用的assets文件夹下,并在布局文件中使用LottieAnimationView组件展示动画效果。

LottieAnimationView lottieAnimationView = (LottieAnimationView) findViewById(R.id.lottie_view);
lottieAnimationView.setAnimation("explosion.json");
lottieAnimationView.loop(true);
lottieAnimationView.playAnimation();

二、进阶操作

1、Lottie视图和视图动画

Lottie通常将可重用的Lottie视图存储在单个文件中,并以视图动画方式展示。这也允许您在单个文件中配置复杂的Lottie动画,以及为其分配布局参数。在布局中使用,它继承自View。

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="hello-world.json"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
   />

2、Lottie缓存

Lottie Animation 在加载 JSON 文件时,它是从 Assets 中读取文件并转换为 Lottie Composition。为了更好的性能,Lottie 支持将 Lottie Composition 的缓存可持续化在可配置的 Cache 中,以便于下一次访问。比如使用 LottieCompositionCache 的 CacheKey,表示应缓存 LottieComposition 的唯一标识符。

CacheKey cacheKey = new SimpleCacheKey("my_composition");
LottieComposition composition = cacheProvider.fetch(cacheKey);
if (composition == null) {
    InputStream inputStream = ...
    composition = new LottieComposition
            .Factory()
            .fromJsonInputStreamSync(inputStream, "my_composition");
    cacheProvider.put(cacheKey, composition);
}

3、与 Property Animation 集成

Property Animation是Android系统提供的View动画框架,Lottie Animation也支持与Android 自带动画框架Property Animation 结合使用。可以使用 ValueAnimator 播放 LottieComposition 动画。创建动画播放器

LottieComposition.Factory.fromRawRes(getContext(), R.raw.material_wave_loading)
                .addListener(new LottieListener
   () {
                    @Override
                    public void onResult(LottieComposition result) {
                        ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
                        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                            @Override
                            public void onAnimationUpdate(ValueAnimator animation) {
                                animationView.setProgress((Float) animation.getAnimatedValue());
                            }
                        });
                        animator.setRepeatCount(ValueAnimator.INFINITE);
                        animator.setRepeatMode(ValueAnimator.REVERSE);
                        animator.setInterpolator(new LinearInterpolator());
                        animator.setDuration(900);
                        animator.start();
                    }
                });
   

三、Lottie文件创建

1、导出JSON文件

在Adobe After Effects中操作制作的 Lottie 动画,导出时选择 Bodymovin 插件进行导出,导出文件类型为 JSON。导出 Lottie 动画时,你应该需要保持与你的主应用程序一致的编码方式,以便以后的使用。

2、性能优化

Lottie的唯一缺点是在特定情况下它会变得非常笨重,并且消耗电池寿命。在这种情况下,查阅 Lottie调优,以获得更好的性能表现。

3、工作流程和进度监视

在 Lottie 中,可以借用 LottieAnimationView 对象,使用 addAnimatorUpdateListener(...) ,来追踪播放进度。在 LottieAnimationView 上设置合适的 loop true/false 和 addAnimatorUpdateListener(...) 向监听器中添加进度追踪,即可同时运行多个动画文件。

LottieAnimationView animationView = findViewById(R.id.loading_view);
...
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float progress = (float) animation.getAnimatedValue();
        animationView.setProgress(progress);
    }
});
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(900);
animator.start();

四、结语

总之,Android Lottie极大地简化了动画实现的难度,同时获得了更高的质量和效率。通过本文的介绍,相信你已经对Android Lottie的使用和应用有了更加深入的了解。