看到這邊文章隧期，默認(rèn)你已經(jīng)懂得 lottie 庫(kù)的基本使用了按声。不懂請(qǐng)移步官網(wǎng)燃少。https://airbnb.design/lottie/
我遇到的問題是需要修改動(dòng)畫的顏色邑贴。
比如在一個(gè)按鈕的點(diǎn)擊動(dòng)效中席里，可能需要根據(jù)按鈕的狀態(tài)動(dòng)態(tài)的修改動(dòng)效的顏色，那么該怎么操作呢拢驾？
首先要明白在顏色繪制的兩種類型:填充和描邊奖磁，即我們?cè)趘iew 的繪制中的solid 和stroke
在bodymovin生成的json動(dòng)效文件中對(duì)應(yīng)的是如下
"nm": "填充 1",//此動(dòng)效中顏色繪制的名稱，可自定義
"mn": "ADBE Vector Graphic - Fill"http://顏色繪制的類型 填充繁疤，固定參數(shù)
"nm": "描邊 1",//此動(dòng)效中顏色繪制的名稱咖为，可自定義
"mn": "ADBE Vector Graphic - Stroke",//顏色繪制的類型 描邊，固定參數(shù)
接下來在代碼中如何操作呢：
第一種方式 通過需要修改顏色的keypath 的關(guān)鍵字匹配來批量操作
//方法一
...
@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("**"));
//通過匹配關(guān)鍵字的深度稠腊，來過濾需要改變顏色的keypath
for (KeyPath path : list) {
Log.d("mirror", path.keysToString());
//通過匹配關(guān)鍵字的深度對(duì)深度為1 和2 的填充色進(jìn)行修改
if (path.matches("填充 1", 2)||path.matches("填充 1", 1) ) {
mirror.addValueCallback(path,
//修改對(duì)應(yīng)keypath的填充色的屬性值
LottieProperty.COLOR,
new SimpleLottieValueCallback<Integer>() {
@Override
public Integer getValue(
LottieFrameInfo<Integer> lottieFrameInfo) {
return COLORS[1];
}
});
}else if(path.matches("描邊 1", 2) ){ //通過匹配關(guān)鍵字的深度修改深度為2 的描邊色進(jìn)行修改
mirror.addValueCallback(path,
//修改對(duì)應(yīng)keypath的描邊色的屬性值
LottieProperty.STROKE_COLOR,
new SimpleLottieValueCallback<Integer>() {
@Override
public Integer getValue(
LottieFrameInfo<Integer> lottieFrameInfo) {
//修改對(duì)應(yīng)keypath的描邊色
return COLORS[1];
}
});
}
}
}
});
...
}
第二種方式 直接輸入具體的keypath 來進(jìn)行修改
@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,
//修改對(duì)應(yīng)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,
//修改對(duì)應(yīng)keypath的填充色的屬性值
LottieProperty.STROKE_COLOR,
new SimpleLottieValueCallback<Integer>() {
@Override
public Integer getValue(
LottieFrameInfo<Integer> lottieFrameInfo) {
return COLORS[1];
}
});
}
});
}
代碼中會(huì)打印出所有的keypath 在所有的keypath 中躁染，你選擇對(duì)應(yīng)路徑且末尾帶有ADBE Vector Graphic - Fill對(duì)應(yīng)的 "nm": "填充 1" 或ADBE Vector Graphic - Stroke 對(duì)應(yīng)的 "nm": "描邊 1" 中的 填充和描邊對(duì)應(yīng)的字樣它們可能會(huì)是"nm": "Fill1" 和"nm": "STROKE 1"
如果你的動(dòng)效實(shí)在是復(fù)雜到有無數(shù)個(gè)keypath 需要修改，且命名和深度都沒有規(guī)律可言麻养，那么不如和動(dòng)效師再溝通溝通褐啡。
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]
