是否可以通过编程方式为 lottie 动画重新着色?
Is it possible to recolor a lottie animation programmatically?
如果我有一个 json 文件形式的 lottie 动画,有没有办法在代码中甚至在 json 本身内重新着色?
(明确地说,我希望有一种方法可以在不涉及 After Effects 的情况下完成。例如,如果我决定更改我的应用程序的原色,则整个应用程序将发生变化,但动画除外,除非有一种方法可以做到这一点.)
我明白了。对于此示例,假设我想将特定图层重新着色为 Color.RED.
您将需要 LottieAnimationView、KeyPath 和 LottieValueCallback
private LottieAnimationView lottieAnimationVIew;
private KeyPath mKeyPath;
private LottieValueCallback<Integer> mCallback;
然后在您的 onCreate(或片段的 onViewCreated)中,您将获得带有 findViewById 的动画,以及 lottieAnimationView 的“addLottieOnCompositionLoadedListener”,您将在其中设置“mKeyPath”和“mCallback”:
lottieAnimationVIew = findViewById(R.id.animationView);
lottieAnimationView.addLottieOnCompositionLoadedListener(new LottieOnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
mKeyPath = getKeyPath(); // This is your own method for getting the KeyPath you desire. More on that below.
mCallback = new LottieValueCallback<>();
mCallback.setValue(Color.RED);
checkBox.addValueCallback(mKeyPath, LottieProperty.COLOR, mCallback);
}
});
参数“LottieProperty.COLOR”指定我要更改的属性。
可能有更好的方法来执行此操作,但这是我的“getKeyPath”方法,用于查找我想要更改的特定内容。它会记录每个 KeyPath,这样你就可以看到你想要哪个。一旦您提供了正确的索引,它就会 returns 它。我看到我想要的是列表中的第 5 个,因此硬编码索引为 4。
private KeyPath getKeyPath() {
List<KeyPath> keyPaths = lottieAnimationView.resolveKeyPath(new KeyPath("Fill", "Ellipse 1", "Fill 1"));
for (int i = 0; i < keyPaths.size(); i++) {
Log.i("KeyPath", keyPaths.get(i).toString());
}
if (keyPaths.size() == 5) {
return keyPaths.get(4);
}
else {
return null;
}
}
请注意,“Fill”、“Ellipse 1”、“Fill 1”是我提供的字符串,用于将列表缩小到只有那些具有这些键的字符串,因为我知道我想要的图层将在其中那些。可能还有更好的方法来做到这一点。
关于此主题的另一个线程采用相同的方法但有点简化:
直接举个例子(Kotlin):
yourLottieAnimation.addValueCallback(
KeyPath("whatever_keypath", "**"),
LottieProperty.COLOR_FILTER
) {
PorterDuffColorFilter(
Color.CYAN,
PorterDuff.Mode.SRC_ATOP
)
}
您也可以在 Lottie 编辑器中找到键路径的名称。
如果我有一个 json 文件形式的 lottie 动画,有没有办法在代码中甚至在 json 本身内重新着色?
(明确地说,我希望有一种方法可以在不涉及 After Effects 的情况下完成。例如,如果我决定更改我的应用程序的原色,则整个应用程序将发生变化,但动画除外,除非有一种方法可以做到这一点.)
我明白了。对于此示例,假设我想将特定图层重新着色为 Color.RED.
您将需要 LottieAnimationView、KeyPath 和 LottieValueCallback
private LottieAnimationView lottieAnimationVIew;
private KeyPath mKeyPath;
private LottieValueCallback<Integer> mCallback;
然后在您的 onCreate(或片段的 onViewCreated)中,您将获得带有 findViewById 的动画,以及 lottieAnimationView 的“addLottieOnCompositionLoadedListener”,您将在其中设置“mKeyPath”和“mCallback”:
lottieAnimationVIew = findViewById(R.id.animationView);
lottieAnimationView.addLottieOnCompositionLoadedListener(new LottieOnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
mKeyPath = getKeyPath(); // This is your own method for getting the KeyPath you desire. More on that below.
mCallback = new LottieValueCallback<>();
mCallback.setValue(Color.RED);
checkBox.addValueCallback(mKeyPath, LottieProperty.COLOR, mCallback);
}
});
参数“LottieProperty.COLOR”指定我要更改的属性。
可能有更好的方法来执行此操作,但这是我的“getKeyPath”方法,用于查找我想要更改的特定内容。它会记录每个 KeyPath,这样你就可以看到你想要哪个。一旦您提供了正确的索引,它就会 returns 它。我看到我想要的是列表中的第 5 个,因此硬编码索引为 4。
private KeyPath getKeyPath() {
List<KeyPath> keyPaths = lottieAnimationView.resolveKeyPath(new KeyPath("Fill", "Ellipse 1", "Fill 1"));
for (int i = 0; i < keyPaths.size(); i++) {
Log.i("KeyPath", keyPaths.get(i).toString());
}
if (keyPaths.size() == 5) {
return keyPaths.get(4);
}
else {
return null;
}
}
请注意,“Fill”、“Ellipse 1”、“Fill 1”是我提供的字符串,用于将列表缩小到只有那些具有这些键的字符串,因为我知道我想要的图层将在其中那些。可能还有更好的方法来做到这一点。
关于此主题的另一个线程采用相同的方法但有点简化:
直接举个例子(Kotlin):
yourLottieAnimation.addValueCallback(
KeyPath("whatever_keypath", "**"),
LottieProperty.COLOR_FILTER
) {
PorterDuffColorFilter(
Color.CYAN,
PorterDuff.Mode.SRC_ATOP
)
}
您也可以在 Lottie 编辑器中找到键路径的名称。