Lottie⽀持复杂动画（json）使⽤笔记Lottie⽀持复杂动画（json）使⽤笔记
基础信息
Lottie Git开源地址（都给出只是⽅便⼤家，其实我本⼈只⽤到Android）
Android：
iOS：
React Native：
JSON⽂件需要Bodymovin导出的json⽂件
Bodymovin：
官⽅说明：
官⽅Demo（Google市场）：
Lottie相关信息
官⽅案例丢在Google应⽤市场了，国内不好下载。所以⼲脆⾃⼰打包Demo
如果是要研究代码，⼜不想⽤Git，可以⾃⼰反编译看看
我下载它是因为json动画⽂件不好弄：说说我怎么取的资源吧，尽管⼤多数都知道。
1. 直接apk扩展名改成zip
2. 使⽤压缩⽂件打开
3. assets⽬录⾥⾯全部是需要的⽂件
4. 我也准备了
Lottie使⽤笔记
设置动画⽂件，优先匹配代码，代码没设置，显⽰的才会是布局⽂件的配置。
初始化配置
Lottie要求最低编辑版本是16（Android4.1）
minSdkVersion 16
Gradle注册添加⽀持
dependencies {
compile 'com.airbnb.android:lottie:1.0.1'
}
添加json动画⽂件到资产⽬录（app/src/main/assets）
给使⽤到该控件的布局⽂件根标签添加（如果你在布局⽂件设置的话，如果没有，请忽略）
xmlns:app="schemas.android/apk/res-auto"
展⽰动画
布局⽂件
/**
* lottie_fileName json⽂件名
* lottie_fileName json⽂件名
* lottie_loop 是否循环播放
* lottie_autoPlay 是否⾃动播放
<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" />svg和canvas的区别
代码实现
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
// 设置json⽂件
animationView.setAnimation("helloworld.json");
// 设置是否循环播放
animationView.loop(true);
// 播放动画
animationView.playAnimation();
// 暂停动画：貌似有点不同
animationView.cancelAnimation();
// 停⽌动画：我感觉两个效果顺序是颠倒的，使⽤到时候请测试看看吧
animationView.pauseAnimation();
// 跳转进度（0.0-1.1）
animationView.setProgress(float f);
// 在监听中可以添加代码设置动画时长
animator.setDuration(1000L);
切换动画
// 最简单的，但是需要注意，只适⽤于⼩Json⽂件，⼤的Json加载时间过长，中间可能空出来。
// animationView.setAnimation("LottieLogo2.json");
// animationView.playAnimation();
// 官⽅还给出另外⼀种标准的切换⽅式
LottieComposition.fromAssetFileName(act, "LottieLogo2.json",
new LottieComposition.OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
animationView.setComposition(composition);
animationView.playAnimation();
}
});
设置监听
// 播放的⽂件更新的时候，也可以理解每⼀帧都调⽤，没想到应⽤场景，反正更⼀个动画就不停的调⽤。animationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
}
});
// 常⽤的监听，很多都很有⽤处。
animationView.addAnimatorListener(new Animator.AnimatorListener() {
// 动画开始调⽤
@Override
public void onAnimationStart(Animator animator) {
}
// 如果设置loop为true，永远不会调⽤
@Override
public void onAnimationEnd(Animator animator) {
}
// 动画取消监听，监听的是Cancel⽅法，可是还是进度条暂停的状态。
@Override
public void onAnimationCancel(Animator animator) {
}
// 动画重复，第⼀次播放不是重复，不包含在内，切换动画也⼀样。
@Override
public void onAnimationRepeat(Animator animator) {
}
});
本地⽂件展⽰
这个可以直接打开系统的⽂件管理器
Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
intent.setType("*/*");
intent.addCategory(Intent.CATEGORY_OPENABLE);
try {
ateChooser(intent, "请选择⼀个JSON⽂件"), PLAYER_BY_FILE);
} catch (t.ActivityNotFoundException ex) {
Toast.makeText(act, "请安装⼀个⽂件管理器。", Toast.LENGTH_SHORT).show();
}
在这⾥接收选择的⽂件
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if(requestCode == PLAYER_BY_FILE){
Uri uri = Data();
InputStream fis;
try {
switch (Scheme()) {
case "file":
fis = new Path());
break;
case "content":
fis = ContentResolver().openInputStream(uri);
break;
default:
Toast.makeText(act, "加载失败！", Toast.LENGTH_SHORT).show();
return;
}
} catch (FileNotFoundException e) {
Toast.makeText(act, "请安装⼀个⽂件管理器。", Toast.LENGTH_SHORT).show();
return;
}
}
}
根据返回的 输⼊流 InputStream 来展⽰Json动画
LottieComposition
.fromInputStream(act, fis, new LottieComposition.OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
animationView.setComposition(composition);
animationView.playAnimation();
}
}
});
根据⽹络展⽰
/
/ str 就是联⽹请求到的json字符串
JSONObject jsonObject = null;
try {
jsonObject = new JSONObject(str);
} catch (JSONException e) {
e.printStackTrace();
}
LottieComposition
.fromJson(getResources(), jsonObject, new LottieComposition.OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
animationView.setComposition(composition);
animationView.playAnimation();
}
});
引导界⾯动画
这个，建议别看官⽅的Demo，引⽤第三⽅的⼯具类，反正我没⽤过那个类，只能⼀⾏⼀⾏的分析。最后，我发现实际上只是做了⼀个ViewPager的滑动监听，他之所以⽤那个是为了美观。如果谁有兴趣，可以使⽤⼀下试试看。
1. 布局⽂件使⽤RelativeLayout，在 LottieAnimationView 上⾯添加⼀个ViewPager
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="schemas.android/apk/res/android"
xmlns:tools="schemas.android/tools"
android:id="@+id/activity_change_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="stlottieanimation.lottie.ChangePagerActivity">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_show_animation"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
2. 代码⽅⾯设置监听ViewPager滑动。lerp⽅法可以根据⾃⼰喜欢修改速度。
// ViewPager 使⽤透明的Fragment填充
// 设置 LottieAnimationView 动画的进度与ViewPager联动
/**
* 这⾥之所以多⼀个1f，是为了ViewPager最后⼀个item不能滑动准备的（值是根据EmptyFragment数量计算的）
*/
private static final float[] ANIMATION_TIMES = new float[]{
0f,
0.3333f,
0.6666f,
1f,
1f
1f
};
/**
* 为了ViewPager联动效果准备的空Fragment。
*/
private List<EmptyFragment> emptyFragments;
…
…
mVpShowAnimation.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
setAnimationProgress(position, positionOffset);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
private void setAnimationProgress(int position, float positionOffset) {
float startProgress = ANIMATION_TIMES[position];
float endProgress = ANIMATION_TIMES[position + 1];
// 更新动画进度
animationView.setProgress(lerp(startProgress, endProgress, positionOffset));
}
// 根据ViewPager拖动偏移⽐例来计算位置
private float lerp(float startValue, float endValue, float f) {
return startValue + f * (endValue - startValue);
}
字母特效动画
如果谁⽤到的话，我建议是⽤我这个代码，官⽅代码为了兼容性删减了很多功能。当然，如果⽤官⽅的，只需要复制官⽅Git⾥⾯LottieFontViewGroup 这个⽂件即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。