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

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 循环模式

注意注意注意

1、资源是要放在assets中的

我这里的目录结构为:
json文件: assets/anim/done.json
图片资源: assets/anim/images/image_0.png

2、assets区分大小写,哪怕是后缀名
3、图片资源文件名必须要和json文件里面的相应图片资源文件名相同。

你可能感兴趣的:(Android)