看到这边文章，默认你已经懂得 lottie 库的基本使用了。不懂请移步官网。https://airbnb.design/lottie/
我遇到的问题是需要修改动画的颜色。
比如在一个按钮的点击动效中，可能需要根据按钮的状态动态的修改动效的颜色，那么该怎么操作呢？
首先要明白在颜色绘制的两种类型:填充和描边，即我们在view 的绘制中的solid 和stroke
在bodymovin生成的json动效文件中对应的是如下
"nm": "填充 1",//此动效中颜色绘制的名称，可自定义
"mn": "ADBE Vector Graphic - Fill"//颜色绘制的类型 填充，固定参数
"nm": "描边 1",//此动效中颜色绘制的名称，可自定义
"mn": "ADBE Vector Graphic - Stroke",//颜色绘制的类型 描边，固定参数
接下来在代码中如何操作呢：
第一种方式 通过需要修改颜色的keypath 的关键字匹配来批量操作
//方法一
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LottieAnimationView mirror = findViewById(R.id.mirror);
mirror.addLottieOnCompositionLoadedListener(
new LottieOnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition lottieComposition) {
//过滤所有的keypath
List<KeyPath> list = mirror.resolveKeyPath(
new KeyPath("**"));
//通过匹配关键字的深度，来过滤需要改变颜色的keypath
for (KeyPath path : list) {
Log.d("mirror", path.keysToString());
//通过匹配关键字的深度对深度为1 和2 的填充色进行修改
if (path.matches("填充 1", 2)||path.matches("填充 1", 1) ) {
mirror.addValueCallback(path,
//修改对应keypath的填充色的属性值
LottieProperty.COLOR,
new SimpleLottieValueCallback<Integer>() {
@Override
public Integer getValue(
LottieFrameInfo<Integer> lottieFrameInfo) {
return COLORS[1];
}
});
}else if(path.matches("描边 1", 2) ){ //通过匹配关键字的深度修改深度为2 的描边色进行修改
mirror.addValueCallback(path,
//修改对应keypath的描边色的属性值
LottieProperty.STROKE_COLOR,
new SimpleLottieValueCallback<Integer>() {
@Override
public Integer getValue(
LottieFrameInfo<Integer> lottieFrameInfo) {
//修改对应keypath的描边色
return COLORS[1];
}
});
}
}
}
});
...
}
第二种方式 直接输入具体的keypath 来进行修改
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LottieAnimationView mirror = findViewById(R.id.mirror);
mirror= findViewById(R.id.blur);
mirror.addLottieOnCompositionLoadedListener(
new LottieOnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition lottieComposition) {
List<KeyPath> list = mirror.resolveKeyPath(
new KeyPath("**"));
//这段代码就是为了打印出所有的keypath 让你判断哪些需要修改颜色
for (KeyPath path : list) {
Log.d("mirror", path.keysToString());
}
KeyPath keyPath1 = new KeyPath("Rectangle 17","填充 1");
mirror.addValueCallback(keyPath1,
//修改对应keypath的填充色的属性值
LottieProperty.COLOR,
new SimpleLottieValueCallback<Integer>() {
@Override
public Integer getValue(
LottieFrameInfo<Integer> lottieFrameInfo) {
return COLORS[1];
}
});
KeyPath keyPath2 = new KeyPath("Rectangle 20","Rectangle","描边 1");
mirror.addValueCallback(keyPath2,
//修改对应keypath的填充色的属性值
LottieProperty.STROKE_COLOR,
new SimpleLottieValueCallback<Integer>() {
@Override
public Integer getValue(
LottieFrameInfo<Integer> lottieFrameInfo) {
return COLORS[1];
}
});
}
});
}
代码中会打印出所有的keypath 在所有的keypath 中，你选择对应路径且末尾带有ADBE Vector Graphic - Fill对应的 "nm": "填充 1" 或ADBE Vector Graphic - Stroke 对应的 "nm": "描边 1" 中的 填充和描边对应的字样它们可能会是"nm": "Fill1" 和"nm": "STROKE 1"
如果你的动效实在是复杂到有无数个keypath 需要修改，且命名和深度都没有规律可言，那么不如和动效师再沟通沟通。
OTHER
打印出来的keypath 如下,仅供参考
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [空 8]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 矩形路径 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 填充 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 矩形路径 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 填充 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 矩形路径 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 填充 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 矩形路径 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 填充 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 矩形路径 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 填充 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 矩形路径 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 2, Rectangle 2, 填充 1]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 21]
2020-04-29 02:16:58.649 12813-12813/com.example.animatedemo D/mirror: [Rectangle 21, Rectangle]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 21, Rectangle, 描边 1]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 20]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 20, Rectangle]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 20, Rectangle, 描边 1]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 19]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 19, Rectangle]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 19, 填充 1]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 18]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 18, Rectangle]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 18, 填充 1]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 17]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 17, Rectangle]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 17, 填充 1]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 16]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 16, Rectangle]
2020-04-29 02:16:58.650 12813-12813/com.example.animatedemo D/mirror: [Rectangle 16, 填充 1]
