Kdon
Kdon

Reputation: 1225

How to change the properties of a lottie animation using the lottie for flutter package?

I am unable to change the properties of a lottie animation I have set up in flutter. (I specifically wish to change the color.)

Based on the package README I understand I can use a ValueDelegate class to do this.

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

Upvotes: 4

Views: 13826

Answers (6)

Mery
Mery

Reputation: 21

For Lottie.asset I used this code (the change is "BlendMode.scrATop"):

        SizedBox(
          height: 60.0,
          child: IconButton(
            icon: ColorFiltered(
              colorFilter:
                  ColorFilter.mode(Colors.white, BlendMode.srcATop),
              child: Lottie.asset(Lordicon.$12_arrow_down_outline,
                  controller: _animatedIconController),
            ),
            onPressed: () {
              // Blablabla
            },
          ),
        ),

Enjoy :)

Upvotes: 2

Raimondas Lukosius
Raimondas Lukosius

Reputation: 100

I used this code for my file:

 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),
            ),
          ],
        ),`  

Layer 1 - "inerCyrcle" Name: "inerCyrcle" Type: Shape layer ("ty": 4) Keyframes ("ks") contain information about the ellipse's path, trim paths, stroke, and transform properties.

Layer 2 - "outerCircle" Name: "outerCircle" Type: Shape layer ("ty": 4) Keyframes ("ks") contain information about the ellipse's path, stroke, trim paths, and transform properties.

Upvotes: 0

Tobias
Tobias

Reputation: 151

The ValueDelegate.color goes through the Lottie file in hierarchical order and selects the colors to change as specified in the keyPath list. This order is labeled in the code below as layer, group and shape name.

For example, if you wish to select all the groups with name wave_2 Outlines, all the layers should also be selected by using '**' for the layer name in the key path.

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

This approach also works to color several groups at once, provided they have the same group name in the Lottie file.

Upvotes: 11

Waldson Fagundes
Waldson Fagundes

Reputation: 141

I use ColorFiltered for some cases.

 ColorFiltered(
                      colorFilter: const ColorFilter.mode(
                        Colors.red,
                        BlendMode.modulate,
                      ),
                      child: Lottie.asset(
                        "assets/lottie/delete.json",
                        controller: _animationControllerDelete,

Upvotes: 9

omega_mi
omega_mi

Reputation: 718

Didn't find how to change color using ValueDelegate.color So i used ValueDelegate.colorFilter instead:

delegates: LottieDelegates(
   values: [
      ValueDelegate.colorFilter(
         ['wave_2 Outlines', '**'],
         value: ColorFilter.mode(Colors.blue, BlendMode.src),
      ),
   ],
),

If you find a way using ValueDelegate.color, please post it here. Thankyou.

Upvotes: 2

Sandra Ntsoele
Sandra Ntsoele

Reputation: 21

Value and ValueCallback get called every time the animation is rendered.

So there are no values to obtain. You have to define the changes you want to effect, such as changing the colour. But keep in mind that you can only use one of them, using both results in an exception being thrown.

The value for keyPath can be obtained from your Lottie JSON file. The keyPath is the nm value for each of the image's layers.

So referring to your JSON file. At the very top level of each layer, there are three keyPath values you can use:

  • wave_2_outlines
  • wave_1_outlines
  • speaker Outlines

I use this VS Code JSON extension to analyse my files, making it much easier to find the values.

{
   "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",
         ....
      }
   ]...
}

Upvotes: 2

Related Questions