當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/10/14 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 android点击改变背景色的动画,Lottie-android 修改动画颜色小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

看到這邊文章，默認你已經懂得 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]