Lottie - 让复杂动画如此简单

Introduction.gif
Lottie - 让复杂动画如此简单_第1张图片
animation.gif

使用准备

Lottie支持多平台,使用同一个JSON动画文件,可在不同平台实现相同的效果。Android 通过Airbnb的开源项目lottie-android实现,最低支持 API 16;

在项目的 build.gradle 文件添加依赖

dependencies {
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

最新的版本号可以到官网或者github查询,lottie仅支持api16及以上。

  • https://github.com/airbnb/lottie-android
  • http://airbnb.io/lottie/android/android.html

加载方式

1. src/main/assets

        lottieAnimationView = findViewById(R.id.lottieAnimationView);
        lottieAnimationView.setImageAssetsFolder("images");
        lottieAnimationView.setAnimation("data.json");
        lottieAnimationView.loop(true);
        lottieAnimationView.playAnimation();

2. Json String

加载服务器上的.json文件,若有图片可以设置本地代理文件夹或者将图片资源放入 JSON。

private void loadUrl(String url) {
        Request request = new Request.Builder().url(url).build();
        OkHttpClient client = new OkHttpClient();
        client.newCall(request).enqueue(new Callback() {
            @Override public void onFailure(Call call, IOException e) {}
            @Override public void onResponse(Call call, Response response) throws IOException {
                try {
                    JSONObject json = new JSONObject(response.body().string());
                    LottieComposition.Factory
                            .fromJson(getResources(), json, new OnCompositionLoadedListener() {
                                @Override
                                public void onCompositionLoaded(LottieComposition composition) {
                                    lottieAnimationView.setComposition(composition);
                                    lottieAnimationView.playAnimation();
                                }
                            });
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });
    }

3. Url 服务器上的压缩包(包含images和json文件)

  • 通过url直接加载
 lottieAnimationView.setAnimationFromUrl(url);
 lottieAnimationView.playAnimation();
  • 下载到本地解压后指定文件夹代理
    // 资源zip
    public final static File LOTTIE_FILES = new File(Environment.getExternalStorageDirectory()+"/ctclient/lottie/lottie.zip");
    // 动效图片资源
    public final static File IMAGES_FILES = new File(Environment.getExternalStorageDirectory()+"/ctclient/lottie/images");
    // data.json路径
    public final static File JSON_FILE = new File(Environment.getExternalStorageDirectory()+"/ctclient/lottie/data.json");
    
    FileInputStream fis = null;
    if (JSON_FILE.exists()) {
        try {
            fis = new FileInputStream(JSON_FILE);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
    }
    if (fis == null || !IMAGES_FILES.exists()) {
        Log.i("huangssh", "动画资源不存在");
        return;
    }
    final String absolutePath = IMAGES_FILES.getAbsolutePath();
    // 开启硬件加速
    lottieAnimationView.useHardwareAcceleration(true);
    // 设置动画文件夹代理类
    lottieAnimationView.setImageAssetDelegate(new ImageAssetDelegate() {
        @Override
        public Bitmap fetchBitmap(LottieImageAsset asset) {
            BitmapFactory.Options opts = new BitmapFactory.Options();
            opts.inScaled = true;
            opts.inDensity = UtilPhoneParam.densityDpi;
            Bitmap bitmap = null;
            try {
                bitmap = BitmapFactory.decodeFile(absolutePath + File.separator + asset.getFileName(), opts);
            }catch (Exception e){
                e.printStackTrace();
            }
            return bitmap;
        }
    });
    
    // 设置动画
    LottieComposition.Factory.fromInputStream(fis, new OnCompositionLoadedListener() {
        @Override
        public void onCompositionLoaded(@Nullable LottieComposition composition) {
            lottieAnimationView.setComposition(composition);
            lottieAnimationView.playAnimation();
        }
    });

4. 加载SDCard字体

lottieAnimationView.setFontAssetDelegate(new FontAssetDelegate(){
    public Typeface fetchFont(String fontFamily) {
        Typeface customFont = Typeface.createFromFile(FONT_PATH + fontFamily);
        return customFont;
    }
});

常用方法

1. 监听动画进度 [0,1]

    lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            // 判断动画加载结束
            if (valueAnimator.getAnimatedFraction() == 1f) {
                if (dialog.isShowing() && getActivity() != null)
                    dialog.dismiss();
            }
        }
    });

2. 暂停/取消/播放

lottieAnimationView.pauseAnimation();
lottieAnimationView.cancelAnimation();
lottieAnimationView.playAnimation();

3. 循环/播放某个部分

lottieAnimationView.loop(true);
  • ValueAnimator一样使用setRepeatMode(...)setRepeatCount(...)
  • scaleType :只支持centerCropcenterInside
  • 播放动画的某个部分
setMinFrame(...)
setMaxFrame(...)
setMinProgress(...)
setMaxProgress(...)
setMinAndMaxFrame(...)
setMinAndMaxProgress(...)

4. 硬件加速,解决lottie卡顿问题

lottieAnimationView.useHardwareAcceleration(true);

5. 缓存

/*
* Lottie内部有两个缓存map(强引用缓存,弱引用缓存),在动画文件加载完成后会根据设置的缓存策略缓存动画,方便下次使用。
*/
lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong);    //强缓存

lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak);      //弱缓存

根据进度缓存,并为下次播放作准备

lottieAnimationView.setProgress(progress);        //设置当前进度
lottieAnimationView.buildDrawingCache();          //强制缓存绘制数据
Bitmap image = lottieAnimationView.getDrawingCache(); //获取当前绘制数据

After Effects方面注意点(for设计师)

1. 官网动画实例 www.lottiefiles.com
2. AE文件预览 https://www.lottiefiles.com/preview
3. 在为Lottie构建时,您始终必须记住,这些JSON文件需要尽可能小巧令移动产品尽可能小。 例如,尽可能使用parenting。 在类似的图层上复制相同的关键帧会增加额外的代码。 只有在必要时才使用路径关键帧动画。 由于它为每个关键帧上的每个顶点添加数据,因此占用的空间最多。 诸如Autotrace之类的技术,或者每帧都为您提供关键帧的摇摆器,可能会使您的JSON文件非常大,并可能会对性能产生负面影响。 必须与组合物的设置方式保持平衡,以使事物尽可能高效。
4. 将任何Adobe Illustrator,EPS,SVG或PDF资源转换为After Effects中的图层,否则它们将无法在您的Lottie动画中使用。
5. Lottie尚不支持效果菜单中的表达式或任何效果。
6. 使用alpha遮罩会影响性能。 如果你使用的是alpha遮罩或alpha倒置遮罩,遮罩的大小会对性能产生更大的影响。 如果必须使用遮罩,请覆盖最小的区域。
7. 混合模式(如Multiply, Screen 或 Add)尚不受支持,也不支持Luma遮罩。
8. Lottie还不支持阴影,颜色叠加或笔触等图层效果。
9. 导出比您想要支持的最宽屏幕更宽的动画,使开发者在Android上使用centerCrop类型或在iOS上使用aspectFill内容模式。
10. 将图片资源放入JSON, 将图片资源整合到动画的 JSON文件中,开发人员的工作量就可以节约很多。
  • 需要先将图片转换成矢量图 SVG 格式,这个设计师一定有办法。
  • 使用 Illustrator 将 SVG 文件另存为 .ai 文件。
  • 使用 .ai 文件在 AE 中做动画处理。
  • 最后通过 Bodymovin 插件,输出动画资源。
    官方文档: artwork-to-lottie-walkthrough

引用文献

  • 官方文档: http://airbnb.io/lottie/
  • Lottie 动画里有图片怎么办?设计师小姐姐也能帮你减少开发量!
  • Lottie : 让动画如此简单
  • Lottie -- 轻松实现动态加载直播礼物动画

你可能感兴趣的:(Lottie - 让复杂动画如此简单)