android点击改变背景色的动画,Lottie-android 修改动画颜色

戴瑞

2023-12-01

看到这边文章，默认你已经懂得 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 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() {

@Override

public Integer getValue(

LottieFrameInfo lottieFrameInfo) {

return COLORS[1];

}

});

}else if(path.matches("描边 1", 2) ){ //通过匹配关键字的深度修改深度为2 的描边色进行修改

mirror.addValueCallback(path,

//修改对应keypath的描边色的属性值

LottieProperty.STROKE_COLOR,

new SimpleLottieValueCallback() {

@Override

public Integer getValue(

LottieFrameInfo 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 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() {

@Override

public Integer getValue(

LottieFrameInfo lottieFrameInfo) {

return COLORS[1];

}

});

KeyPath keyPath2 = new KeyPath("Rectangle 20","Rectangle","描边 1");

mirror.addValueCallback(keyPath2,

//修改对应keypath的填充色的属性值

LottieProperty.STROKE_COLOR,

new SimpleLottieValueCallback() {

@Override

public Integer getValue(

LottieFrameInfo 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]