我无法更改在 flutter 中设置的 Lottie 动画的属性。 （我特别想改变颜色。）
根据包自述文件，我知道我可以使用 ValueDelegate 类来执行此操作。
//From the README
return Lottie.asset(
'assets/Tests/Shapes.json',
delegates: LottieDelegates(
text: (initialText) => '**$initialText**',
values: [
ValueDelegate.color(
const ['Shape Layer 1', 'Rectangle', 'Fill 1'],'
// UNSURE WHERE TO OBTAIN THESE ABOVE PROPERTY VALUES //
value: Colors.red,
),
\\here is my code - I am unsure how to obtain the appropriate values for keyPath, value and callBack properties, in the ValueDelegate.color.
child: Lottie.asset(
'assets/lottie/audio.json',
delegates: LottieDelegates(
text: (initialText) => '**$initialText**',
values: [
ValueDelegate.color(
const ['Path 1','ADBE Vector Shape - Group','Fill 1'],
value: Colors.blue,
),
],
),
),
~~~
This is the JSON file of the lottie animation I am currently working with....
{"v":"5.1.18","fr":29.9700012207031,"ip":0,"op":60.0000024438501,"w":20,"h":20,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"wave_2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.916},"o":{"x":0.167,"y":0.085},"n":"0p833_0p916_0p167_0p085","t":0,"s":[18.118,9.963,0],"e":[16.868,9.963,0],"to":[-0.20833332836628,0,0],"ti":[0.20833332836628,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":8,"s":[16.868,9.963,0],"e":[16.868,9.963,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.623,"y":1},"o":{"x":0.194,"y":0.147},"n":"0p623_1_0p194_0p147","t":13,"s":[16.868,9.963,0],"e":[18.118,9.963,0],"to":[0.20833332836628,0,0],"ti":[-0.20833332836628,0,0]},{"t":25.0000010182709}],"ix":2},"a":{"a":0,"k":[2.827,7.401,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.192,0],[0.146,0.147],[-0.293,0.293],[3.217,3.217],[-0.293,0.293],[-0.293,-0.293],[3.801,-3.801]],"o":[[-0.192,0],[-0.293,-0.293],[3.217,-3.217],[-0.293,-0.293],[0.293,-0.293],[3.801,3.802],[-0.146,0.147]],"v":[[-1.406,7.151],[-1.936,6.931],[-1.936,5.871],[-1.936,-5.797],[-1.936,-6.858],[-0.876,-6.858],[-0.876,6.931]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.6,0.6,0.647000002394,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.479,7.401],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60.0000024438501,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"wave_1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.89},"o":{"x":0.333,"y":0.23},"n":"0p833_0p89_0p333_0p23","t":4,"s":[14.063,9.959,0],"e":[13.125,9.959,0],"to":[-0.15625,0,0],"ti":[0.15625,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":13,"s":[13.125,9.959,0],"e":[13.125,9.959,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.711,"y":0.995},"o":{"x":0.102,"y":0.082},"n":"0p711_0p995_0p102_0p082","t":19,"s":[13.125,9.959,0],"e":[14.063,9.959,0],"to":[0.15625,0,0],"ti":[-0.15625,0,0]},{"t":30.0000012219251}],"ix":2},"a":{"a":0,"k":[1.95,4.218,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.192,0],[0.146,0.147],[-0.293,0.293],[1.462,1.462],[-0.293,0.293],[-0.293,-0.292],[2.046,-2.048]],"o":[[-0.191,0],[-0.293,-0.292],[1.462,-1.462],[-0.293,-0.293],[0.293,-0.292],[2.046,2.047],[-0.146,0.147]],"v":[[-0.876,3.969],[-1.406,3.749],[-1.406,2.689],[-1.406,-2.615],[-1.406,-3.676],[-0.346,-3.676],[-0.346,3.749]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.6,0.6,0.647000002394,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1.95,4.218],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60.0000024438501,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"speaker Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[5.049,9.975,0],"ix":2},"a":{"a":0,"k":[5.051,7.326,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-0.132,-0.106],[0,0],[0,0],[0,0],[0.17,0],[0,0]],"o":[[0,0],[0.17,0],[0,0],[0,0],[0,0],[-0.132,0.106],[0,0],[0,0]],"v":[[-3.301,1.976],[-0.45,1.976],[0.018,2.14],[3.301,4.765],[3.301,-4.716],[0.018,-2.09],[-0.45,-1.926],[-3.301,-1.926]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0.11,0],[0.136,0.109],[0,0],[0,0],[0,0.414],[0,0],[-0.414,0],[0,0],[0,0],[-0.26,-0.124],[0,-0.289],[0,0],[0.26,-0.124]],"o":[[-0.167,0],[0,0],[0,0],[-0.414,0],[0,0],[0,-0.414],[0,0],[0,0],[0.225,-0.181],[0.26,0.124],[0,0],[0,0.289],[-0.104,0.051]],"v":[[4.051,7.076],[3.582,6.912],[-0.713,3.476],[-4.051,3.476],[-4.801,2.726],[-4.801,-2.676],[-4.051,-3.426],[-0.713,-3.426],[3.582,-6.862],[4.376,-6.952],[4.801,-6.276],[4.801,6.326],[4.376,7.001]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.6,0.6,0.647000002394,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[5.051,7.326],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60.0000024438501,"st":0,"bm":0}],"markers":[]}
ValueDelegate.colorkeyPath例如，如果您希望选择名称为
wave_2 Outlinesdelegates: LottieDelegates(
values: [
ValueDelegate.color(
// keyPath order: ['layer name', 'group name', 'shape name']
const ['**', 'wave_2 Outlines', '**'],
value: Colors.orange,
),
],
),
此方法还可以同时为多个组着色，前提是它们在 Lottie 文件中具有相同的组名称。
在某些情况下我使用 ColorFiltered。
ColorFiltered(
colorFilter: const ColorFilter.mode(
Colors.red,
BlendMode.modulate,
),
child: Lottie.asset(
"assets/lottie/delete.json",
controller: _animationControllerDelete,
Value 和 ValueCallback。
因此没有任何值可供获取。您必须定义想要实现的更改，例如更改颜色。但请记住，您只能使用其中之一，使用两者都会导致引发异常。
keyPath 的值可以从您的 Lottie JSON 文件中获取。 keyPath 是图像每个层的 nm 值。
因此请参考您的 JSON 文件。在每层的最顶层，您可以使用三个 keyPath 值：
我使用此 VS Code JSON 扩展来分析我的文件，从而更轻松地查找值。
{
"v":"5.1.18",
"fr":29.9700012207031,
"ip":0,
"op":60.0000024438501,
"w":20,
"h":20,
"nm":"Comp 1",
"ddd":0,
"assets":[
],
"layers":[
{
"ddd":0,
"ind":1,
"ty":4,
"nm":"wave_2 Outlines",
...
},
{
"ddd":0,
"ind":2,
"ty":4,
"nm":"wave_1 Outlines",
...
},
{
"ddd":0,
"ind":5,
"ty":4,
"nm":"speaker Outlines",
....
}
]...
}
没有找到如何使用
ValueDelegate.colorValueDelegate.colorFilterdelegates: LottieDelegates(
values: [
ValueDelegate.colorFilter(
['wave_2 Outlines', '**'],
value: ColorFilter.mode(Colors.blue, BlendMode.src),
),
],
),
如果您找到使用
ValueDelegate.color我在我的文件中使用了此代码：
Lottie.asset( 'assets/timerCyrcle.json',
width: lottieSize,
height: lottieSize,
fit: BoxFit.cover,
controller: _lottieController,
repeat: false,
delegates: LottieDelegates(
values: [
ValueDelegate.colorFilter(
['inerCyrcle', '**'],
value: ColorFilter.mode(Colors.blue, BlendMode.src),
),
ValueDelegate.colorFilter(
['outerCircle', '**'],
value: ColorFilter.mode(Colors.red, BlendMode.src),
),
],
),`
第 1 层 - “inerCyrcle” 名称：“inerCycle” 类型：形状层（“ty”：4） 关键帧（“ks”）包含有关椭圆路径、修剪路径、描边和变换属性的信息。
第 2 层 - “外圈” 名称：《外圈》 类型：形状层（“ty”：4） 关键帧（“ks”）包含有关椭圆路径、描边、修剪路径和变换属性的信息。