一个很6的动画框架--Lottie

最新推荐文章于 2024-07-31 00:18:18 发布

Brick farmers

最新推荐文章于 2024-07-31 00:18:18 发布

阅读量660

点赞数

分类专栏： Android 文章标签： animation Android Lottie

Android 专栏收录该内容

108 篇文章 4 订阅

订阅专栏

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

使用之前，在项目中添加依赖

implementation 'com.airbnb.android:lottie:$lottieVersion'

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

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

使用方式：
加载本地动画：
将动画文件放至：src/main/assets

下面是xml中使用:

<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_loop="true"
            app:lottie_autoPlay="true" />

java：

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

加载服务端动画：
加载服务器上的.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();
                }
            }
        });
    }

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

// 资源zip
    public final static File LOTTIE_FILES = new File(Environment.getExternalStorageDirectory()+"/ctc/lottie/lottie.zip");
    // 动效图片资源
    public final static File IMAGES_FILES = new File(Environment.getExternalStorageDirectory()+"/ctc/lottie/images");
    // data.json路径
    public final static File JSON_FILE = new File(Environment.getExternalStorageDirectory()+"/ctc/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();
    // 开启硬件加速
    lottieSolar.useHardwareAcceleration(true);
    // 设置动画文件夹代理类
    lottieSolar.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) {
            lottieSolar.setComposition(composition);
            lottieSolar.playAnimation();
        }
    });

加载SDCard字体

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

----------------常用方法：------------------
监听动画进度 [0,1]

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

硬件加速，解决lottie卡顿问题

lottieSolar.useHardwareAcceleration(true);

缓存

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

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

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

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

函数：

字段	作用
lottie_autoPlay	是否自动播放
lottie_fileName json	文件路径(assets)
lottie_imageAssetsFolder	图片资源路径(如果有图片资源，则必须要填，否则会崩溃)
lottie_scale	动画居中缩放
lottie_progress	播放进度
lottie_repeatCount	循环次数 -1无限循环 0不循环
lottie_repeatMode	循环模式