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 | 循环模式 |
注意注意注意
我这里的目录结构为:
json文件: assets/anim/done.json
图片资源: assets/anim/images/image_0.png