flutter - 如何使用 lottie for flutter 包更改 lottie 动画的属性？

Question

我无法更改我在 flutter 中设置的 lottie 动画的属性。 (我特别想改变颜色。)

根据包 README，我知道我可以使用 ValueDelegate 类来执行此操作。

README

//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":[]}

Answer 1

ValueDelegate.color 按层级顺序遍历 Lottie 文件并选择要更改的颜色，如 keyPath 列表中指定的那样。此顺序在下面的代码中标记为层、组 和形状名称。

例如，如果您希望选择名称为 wave_2 Outlines 的所有组，还应通过在关键路径中使用“**”作为图层名称来选择所有图层。

delegates: LottieDelegates(
  values: [
    ValueDelegate.color(
      // keyPath order: ['layer name', 'group name', 'shape name']
      const ['**', 'wave_2 Outlines', '**'],
      value: Colors.orange,
    ),
  ],
),

如果 Lottie 文件中的组名相同，这种方法也可以同时为多个组着色。