lottie加载动画,第一次有延迟问题

lottie是airbnb推出的一个直接将AE工程转化为动画的工具。

ae.project-->data.json-->LottieComposition-->Lottie动画

之前做一个比较复杂的动画,花了两天时间都在画各种弧,计算运动轨迹等等。感觉我不是在编程,我是在算数学。

上lottie的过程,花了半天时间调AE动画,因为设计师的电脑上装插件没装成功。所以AE转json文件的过程都抛给了开发。

原本做第一个动画就花了2天,现在4个动画,我几分钟全搞定了。设计想怎么改,就怎么改,我无非是替换一下json文件就可以了,真是痛快。在设计眼皮下,一像素一像素调UI,我觉得是最浪费时间的事。

说说碰到的这个问题吧:

场景:第一打开Activity的时候,动画过了0.3s才显示出来,好点的手机不会,老点的手机就比较明显。

分析了一下源码

public void setAnimation(@RawRes final int animationResId, final CacheStrategy cacheStrategy) {
    this.animationResId = animationResId;
    animationName = null;
    if (RAW_RES_WEAK_REF_CACHE.indexOfKey(animationResId) > 0) {
      WeakReference<LottieComposition> compRef = RAW_RES_WEAK_REF_CACHE.get(animationResId);
      LottieComposition ref = compRef.get();
      if (ref != null) {
        setComposition(ref);
        return;
      }
    } else if (RAW_RES_STRONG_REF_CACHE.indexOfKey(animationResId) > 0) {
      setComposition(RAW_RES_STRONG_REF_CACHE.get(animationResId));
      return;
    }

    clearComposition();
    cancelLoaderTask();
    compositionLoader = LottieComposition.Factory.fromRawFile(getContext(), animationResId,
        new OnCompositionLoadedListener() {
          @Override public void onCompositionLoaded(LottieComposition composition) {
            if (cacheStrategy == CacheStrategy.Strong) {
              RAW_RES_STRONG_REF_CACHE.put(animationResId, composition);
            } else if (cacheStrategy == CacheStrategy.Weak) {
              RAW_RES_WEAK_REF_CACHE.put(animationResId, new WeakReference<>(composition));
            }

            setComposition(composition);
          }
        });
  }

setAnimation的过程,会先从cache中取,如果没有就自己构造一个Composition,composition中包含了所有的动画描述信息。

所以问题就出在了composition的构造

/**
     * Loads a composition from a json reader.
     * <p>
     * ex: fromInputStream(context, new FileInputStream(filePath), (composition) -> {});
     */
    public static Cancellable fromJsonReader(
        JsonReader reader, OnCompositionLoadedListener listener) {
      AsyncCompositionLoader loader = new AsyncCompositionLoader(listener);
      loader.executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR, reader);
      return loader;
    }

不断跟进LottieComposition.Factory中的fromRawFile()方法,最终发现AsyncCompositionLoader,问题就出来了,从ae产物json动画描述文件的解析过程是一个异步的过程,自然会影响到动画的第一打开的速度。

对于起步时间敏感的动画,有没有同步的方法给我们调一调呢?

搜了下sync关键字,果然有。

public static LottieComposition fromJsonSync(JsonReader reader) throws IOException {
      return LottieCompositionParser.parse(reader);
    }

然后我们再倒着找最外层封装好的方法:

/**
     * Loads a composition from a file stored in /assets.
     */
    public static Cancellable fromAssetFileName(
        Context context, String fileName, OnCompositionLoadedListener listener) {
      InputStream stream;
      try {
        stream = context.getAssets().open(fileName);
      } catch (IOException e) {
        throw new IllegalArgumentException("Unable to find file " + fileName, e);
      }
      return fromInputStream(stream, listener);
    }

可以可以,就是这个了,把原来xml中的data.json复制一份放在asset目录下,

LottieAnimationView lottieAnimationView = findViewById(R.id.animation_view);
        LottieComposition composition = LottieComposition.Factory.fromFileSync(this,"data.json");
        lottieAnimationView.setComposition(composition);

运行一下,OK,延迟消失了。

当然异步加载有异步的好处。大家可以根据自己的需要来选择同步异步,或者是否需要CacheStrategy来做强缓存,或者弱缓存,提高加载的速度。

### 回答1: Android Lottie是一个用于Android、iOS和Web的开源库,它可以加载和渲染Adobe After Effects动画导出的JSON文件。使用Lottie,开发者可以轻松地将复杂的动画效果集成到自己的应用程序中,而无需编写复杂的动画代码。要加载JSON动画,只需将JSON文件放置在assets文件夹中,并使用LottieAnimationView加载即可。Lottie还提供了许多自定义属性,可以让开发者更好地控制动画的行为和外观。 ### 回答2: Android Lottie是由Airbnb开源的一个动画库,可用于加载和渲染Adobe After Effects创建的Lottie动画文件,这些动画文件存储为JSON格式。与传统的GIF、WebP和MP4格式相比,Lottie动画文件更小,可缩放并且无损失,是完美的UI动画解决方案。 下面是一个简单的步骤,让您轻松加载JSON动画文件: 1. 在您的Android项目中添加依赖项:添加以下dependency到您的build.gradle文件中。 dependencies { implementation 'com.airbnb.android:lottie:3.4.1' } 2.将Lottie动画文件放在assets文件夹中:将动画JSON文件放在您的Android项目的assets文件夹下。 3. 在布局文件中添加LottieView:在布局文件中添加LottieView并设置宽度和高度。您可以使用app:lottie_file指定动画的文件名。例如以下代码: <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_file="your_animation.json" /> 4. 在Activity中加载动画:在您的Activity的onCreate方法中加载动画文件,并开始播放动画LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view); animationView.setAnimation("your_animation.json"); animationView.loop(true); animationView.playAnimation(); 通过上述步骤,您就能够成功地加载JSON动画文件,并将其渲染在您的Android app中。Lottie提供了许多自定义属性,以及可在运行时访问的API,可以让您在呈现动画时,获得更多的自由度和控制权限。 ### 回答3: Android Lottie是一个用于渲染矢量动画的库,由Airbnb开源。该库可以加载由Adobe After Effects导出的json文件,并将其渲染为原生Android视图中的动画效果。Lottie使用了高效而轻量级的渲染引擎来实现这一点,从而为开发人员提供了一种快速而简便的方式来实现优秀的矢量动画效果。 为了加载json动画,首先我们需要在项目中引入Lottie库,这可以通过在build.gradle文件中添加以下依赖项来完成: ``` implementation 'com.airbnb.android:lottie:3.6.1' ``` 完成之后,我们可以在布局文件中添加一个LottieAnimationView视图,并在java代码中使用以下代码加载json动画: ``` LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animationView); animationView.setAnimation("your_animation.json"); animationView.playAnimation(); ``` 在这里,我们将LottieAnimationView的文件名设置为“your_animation.json”,但是您应该将其替换为实际的json文件名。 此外,Lottie也提供了其他一些方法和属性,可用于与动画交互和控制。例如,您可以使用以下方法暂停和恢复动画: ``` animationView.pauseAnimation(); animationView.resumeAnimation(); ``` 还可以使用以下方法将动画设置为循环播放: ``` animationView.setRepeatMode(LottieDrawable.RESTART); animationView.setRepeatCount(LottieDrawable.INFINITE); ``` 总的来说,Lottie是一种简单而有力的工具,可以帮助我们在Android应用程序中实现高质量的矢量动画效果。通过加载json文件并使用LottieAnimationView视图,我们可以轻松地将动画集成到我们的应用程序中。同时,Lottie还提供了一系列方法和属性,使我们可以对动画进行精细的控制和交互,以生成更加生动和有趣的用户体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值