xvrh / lottie-flutter

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
https://pub.dev/packages/lottie
MIT License
1.15k stars 197 forks source link

ValueDelegate.gradientColor Unable to continuously refresh #310

Closed cjl84914 closed 9 months ago

cjl84914 commented 9 months ago

bulb.json

{
  "v": "5.12.2",
  "fr": 25,
  "ip": 0,
  "op": 1,
  "w": 500,
  "h": 500,
  "nm": "bulb",
  "ddd": 0,
  "assets": [],
  "layers": [
    {
      "ddd": 0,
      "ind": 1,
      "ty": 4,
      "nm": "灯泡",
      "sr": 1,
      "ks": {
        "o": {
          "a": 0,
          "k": 100,
          "ix": 11
        },
        "r": {
          "a": 0,
          "k": 0,
          "ix": 10
        },
        "p": {
          "a": 0,
          "k": [
            250,
            250,
            0
          ],
          "ix": 2,
          "l": 2
        },
        "a": {
          "a": 0,
          "k": [
            250,
            250,
            0
          ],
          "ix": 1,
          "l": 2
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100,
            100
          ],
          "ix": 6,
          "l": 2
        }
      },
      "ao": 0,
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ind": 0,
              "ty": "sh",
              "ix": 1,
              "ks": {
                "a": 0,
                "k": {
                  "i": [
                    [
                      0,
                      -42.802
                    ],
                    [
                      42.802,
                      0
                    ],
                    [
                      0,
                      42.802
                    ],
                    [
                      -42.802,
                      0
                    ]
                  ],
                  "o": [
                    [
                      0,
                      42.802
                    ],
                    [
                      -42.802,
                      0
                    ],
                    [
                      0,
                      -42.802
                    ],
                    [
                      42.802,
                      0
                    ]
                  ],
                  "v": [
                    [
                      77.5,
                      0
                    ],
                    [
                      0,
                      77.5
                    ],
                    [
                      -77.5,
                      0
                    ],
                    [
                      0,
                      -77.5
                    ]
                  ],
                  "c": true
                },
                "ix": 2
              },
              "nm": "路径 1",
              "mn": "ADBE Vector Shape - Group",
              "hd": false
            },
            {
              "ty": "fl",
              "c": {
                "a": 0,
                "k": [
                  0.839215695858,
                  0.839215695858,
                  0.839215695858,
                  1
                ],
                "ix": 4
              },
              "o": {
                "a": 0,
                "k": 100,
                "ix": 5
              },
              "r": 1,
              "bm": 0,
              "nm": "填充 1",
              "mn": "ADBE Vector Graphic - Fill",
              "hd": false
            },
            {
              "ty": "tr",
              "p": {
                "a": 0,
                "k": [
                  250.5,
                  153.5
                ],
                "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": "变换"
            }
          ],
          "nm": "灯泡",
          "np": 2,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 1,
      "st": 0,
      "ct": 1,
      "bm": 0
    },
    {
      "ddd": 0,
      "ind": 2,
      "ty": 4,
      "nm": "灯台",
      "sr": 1,
      "ks": {
        "o": {
          "a": 0,
          "k": 100,
          "ix": 11
        },
        "r": {
          "a": 0,
          "k": 0,
          "ix": 10
        },
        "p": {
          "a": 0,
          "k": [
            250,
            250,
            0
          ],
          "ix": 2,
          "l": 2
        },
        "a": {
          "a": 0,
          "k": [
            250,
            250,
            0
          ],
          "ix": 1,
          "l": 2
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100,
            100
          ],
          "ix": 6,
          "l": 2
        }
      },
      "ao": 0,
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ind": 0,
              "ty": "sh",
              "ix": 1,
              "ks": {
                "a": 0,
                "k": {
                  "i": [
                    [
                      0,
                      -5.523
                    ],
                    [
                      22.92,
                      0
                    ],
                    [
                      0,
                      5.523
                    ],
                    [
                      -22.92,
                      0
                    ]
                  ],
                  "o": [
                    [
                      0,
                      5.523
                    ],
                    [
                      -22.92,
                      0
                    ],
                    [
                      0,
                      -5.523
                    ],
                    [
                      22.92,
                      0
                    ]
                  ],
                  "v": [
                    [
                      41.5,
                      0
                    ],
                    [
                      0,
                      10
                    ],
                    [
                      -41.5,
                      0
                    ],
                    [
                      0,
                      -10
                    ]
                  ],
                  "c": true
                },
                "ix": 2
              },
              "nm": "路径 2",
              "mn": "ADBE Vector Shape - Group",
              "hd": false
            },
            {
              "ty": "fl",
              "c": {
                "a": 0,
                "k": [
                  0.486274510622,
                  0.486274510622,
                  0.486274510622,
                  1
                ],
                "ix": 4
              },
              "o": {
                "a": 0,
                "k": 100,
                "ix": 5
              },
              "r": 1,
              "bm": 0,
              "nm": "填充 2",
              "mn": "ADBE Vector Graphic - Fill",
              "hd": false
            },
            {
              "ty": "tr",
              "p": {
                "a": 0,
                "k": [
                  249.5,
                  231
                ],
                "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": "变换"
            }
          ],
          "nm": "盖子",
          "np": 2,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        },
        {
          "ty": "gr",
          "it": [
            {
              "ind": 0,
              "ty": "sh",
              "ix": 1,
              "ks": {
                "a": 0,
                "k": {
                  "i": [
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      -0.14
                    ],
                    [
                      -22.92,
                      0
                    ],
                    [
                      0,
                      3.928
                    ],
                    [
                      0.047,
                      0.139
                    ],
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ]
                  ],
                  "o": [
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ],
                    [
                      -0.046,
                      0.139
                    ],
                    [
                      0,
                      3.928
                    ],
                    [
                      22.92,
                      0
                    ],
                    [
                      0,
                      -0.14
                    ],
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ],
                    [
                      0,
                      0
                    ]
                  ],
                  "v": [
                    [
                      -42,
                      -21
                    ],
                    [
                      -42,
                      48.467
                    ],
                    [
                      -41.923,
                      48.467
                    ],
                    [
                      -42,
                      48.886
                    ],
                    [
                      -2,
                      61
                    ],
                    [
                      41,
                      48.886
                    ],
                    [
                      40.923,
                      48.467
                    ],
                    [
                      41,
                      48.467
                    ],
                    [
                      41,
                      -21
                    ]
                  ],
                  "c": true
                },
                "ix": 2
              },
              "nm": "路径 2",
              "mn": "ADBE Vector Shape - Group",
              "hd": false
            },
            {
              "ty": "gf",
              "o": {
                "a": 0,
                "k": 100,
                "ix": 10
              },
              "r": 1,
              "bm": 0,
              "g": {
                "p": 2,
                "k": {
                  "a": 0,
                  "k": [
                    0,
                    1,
                    1,
                    1,
                    1,
                    0,
                    0,
                    0
                  ],
                  "ix": 9
                }
              },
              "s": {
                "a": 0,
                "k": [
                  -40.486,
                  6.073
                ],
                "ix": 5
              },
              "e": {
                "a": 0,
                "k": [
                  39.271,
                  6.073
                ],
                "ix": 6
              },
              "t": 1,
              "nm": "Gradient Fill 1",
              "mn": "ADBE Vector Graphic - G-Fill",
              "hd": false
            },
            {
              "ty": "tr",
              "p": {
                "a": 0,
                "k": [
                  250,
                  251
                ],
                "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": "变换"
            }
          ],
          "nm": "灯台",
          "np": 2,
          "cix": 2,
          "bm": 0,
          "ix": 2,
          "mn": "ADBE Vector Group",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 1,
      "st": 0,
      "ct": 1,
      "bm": 0
    },
    {
      "ddd": 0,
      "ind": 3,
      "ty": 4,
      "nm": "灯光",
      "sr": 1,
      "ks": {
        "o": {
          "a": 0,
          "k": 100,
          "ix": 11
        },
        "r": {
          "a": 0,
          "k": 0,
          "ix": 10
        },
        "p": {
          "a": 0,
          "k": [
            250,
            250,
            0
          ],
          "ix": 2,
          "l": 2
        },
        "a": {
          "a": 0,
          "k": [
            250,
            250,
            0
          ],
          "ix": 1,
          "l": 2
        },
        "s": {
          "a": 0,
          "k": [
            100,
            100,
            100
          ],
          "ix": 6,
          "l": 2
        }
      },
      "ao": 0,
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "ty": "rc",
              "d": 1,
              "s": {
                "a": 0,
                "k": [
                  232,
                  232
                ],
                "ix": 2
              },
              "p": {
                "a": 0,
                "k": [
                  0,
                  0
                ],
                "ix": 3
              },
              "r": {
                "a": 0,
                "k": 0,
                "ix": 4
              },
              "nm": "矩形路径 1",
              "mn": "ADBE Vector Shape - Rect",
              "hd": false
            },
            {
              "ty": "gf",
              "o": {
                "a": 0,
                "k": 100,
                "ix": 10
              },
              "r": 1,
              "bm": 0,
              "g": {
                "p": 2,
                "k": {
                  "a": 1,
                  "k": [
                    {
                      "i": {
                        "x": 0.833,
                        "y": 0.833
                      },
                      "o": {
                        "x": 0.167,
                        "y": 0.167
                      },
                      "t": 0,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    },
                    {
                      "i": {
                        "x": 0.833,
                        "y": 0.833
                      },
                      "o": {
                        "x": 0.167,
                        "y": 0.167
                      },
                      "t": 2.083,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    },
                    {
                      "i": {
                        "x": 0.833,
                        "y": 0.833
                      },
                      "o": {
                        "x": 0.167,
                        "y": 0.167
                      },
                      "t": 4.167,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    },
                    {
                      "i": {
                        "x": 0.833,
                        "y": 0.833
                      },
                      "o": {
                        "x": 0.167,
                        "y": 0.167
                      },
                      "t": 6.25,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    },
                    {
                      "i": {
                        "x": 0.833,
                        "y": 0.833
                      },
                      "o": {
                        "x": 0.167,
                        "y": 0.167
                      },
                      "t": 8.333,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    },
                    {
                      "i": {
                        "x": 0.833,
                        "y": 0.833
                      },
                      "o": {
                        "x": 0.167,
                        "y": 0.167
                      },
                      "t": 10.417,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    },
                    {
                      "i": {
                        "x": 0.833,
                        "y": 0.833
                      },
                      "o": {
                        "x": 0.167,
                        "y": 0.167
                      },
                      "t": 12.5,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    },
                    {
                      "i": {
                        "x": 0.833,
                        "y": 0.833
                      },
                      "o": {
                        "x": 0.167,
                        "y": 0.167
                      },
                      "t": 14.583,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    },
                    {
                      "i": {
                        "x": 0.833,
                        "y": 0.833
                      },
                      "o": {
                        "x": 0.167,
                        "y": 0.167
                      },
                      "t": 16.667,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    },
                    {
                      "t": 18.75,
                      "s": [
                        0,
                        1,
                        1,
                        1,
                        1,
                        0,
                        0,
                        0
                      ]
                    }
                  ],
                  "ix": 9
                }
              },
              "s": {
                "a": 0,
                "k": [
                  0,
                  0
                ],
                "ix": 5
              },
              "e": {
                "a": 0,
                "k": [
                  100,
                  0
                ],
                "ix": 6
              },
              "t": 2,
              "h": {
                "a": 0,
                "k": 0,
                "ix": 7
              },
              "a": {
                "a": 0,
                "k": 0,
                "ix": 8
              },
              "nm": "Gradient Fill 2",
              "mn": "ADBE Vector Graphic - G-Fill",
              "hd": false
            },
            {
              "ty": "tr",
              "p": {
                "a": 0,
                "k": [
                  250,
                  347
                ],
                "ix": 2
              },
              "a": {
                "a": 0,
                "k": [
                  0,
                  0
                ],
                "ix": 1
              },
              "s": {
                "a": 0,
                "k": [
                  144.528,
                  46.301
                ],
                "ix": 3
              },
              "r": {
                "a": 0,
                "k": 0,
                "ix": 6
              },
              "o": {
                "a": 1,
                "k": [
                  {
                    "i": {
                      "x": [
                        0.833
                      ],
                      "y": [
                        0.833
                      ]
                    },
                    "o": {
                      "x": [
                        0.167
                      ],
                      "y": [
                        0.167
                      ]
                    },
                    "t": 0,
                    "s": [
                      100
                    ]
                  },
                  {
                    "t": 2.0830078125,
                    "s": [
                      100
                    ]
                  }
                ],
                "ix": 7
              },
              "sk": {
                "a": 0,
                "k": 0,
                "ix": 4
              },
              "sa": {
                "a": 0,
                "k": 0,
                "ix": 5
              },
              "nm": "变换"
            }
          ],
          "nm": "灯光",
          "np": 2,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 1,
      "st": 0,
      "ct": 1,
      "bm": 0
    }
  ],
  "markers": [],
  "props": {}
}

flutter code:


class _Animation extends StatefulWidget {
  @override
  State<_Animation> createState() => _AnimationState();
}

class _AnimationState extends State<_Animation> {
  var timer;
  var colorList = [Colors.red, Colors.orange, Colors.yellow];
  var i = 0;

  @override
  void initState() {
    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (i < colorList.length - 1) {
        i++;
      } else {
        i = 0;
      }
      setState(() {

      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/blub.json',
      delegates: LottieDelegates(
        text: (initialText) => '**$initialText**',
        values: [
          ValueDelegate.color(
            const ['灯泡', '灯泡', '填充 1'],
            value: colorList[i],
          ),
          ValueDelegate.gradientColor(
            const ['灯台', '灯台', 'Gradient Fill 1'],
            value: [Colors.black, Colors.grey],
          ),
          ValueDelegate.gradientColor(
            const ['灯光', '灯光', 'Gradient Fill 2'],
            value: [colorList[i], Colors.white],
          ),
        ],
      ),
    );
  }
}

I used lottie 2.7.0, I try continuously refresh bulb light color, but ValueDelegate.gradientColor not working.

xvrh commented 9 months ago

Can you try using callback instead of value in the delegate. example:

ValueDelegate.gradientColor(
  const ['灯光', '灯光', 'Gradient Fill 2'],
  callback: (_) => [colorList[i], Colors.white],
),

Let me know if it helps.

cjl84914 commented 9 months ago

@xvrh I try to replace this code:

ValueDelegate.gradientColor(
  const ['灯光', '灯光', 'Gradient Fill 2'],
  callback: (_) => [colorList[i], Colors.white],
),

but it can not helps.

xvrh commented 9 months ago

It seems there is a bug in the update of the gradient. In the mean time to unblock you, you can set a key in the Lottie widget like this:

  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/blub.json',
      key: ValueKey(i),
      delegates: LottieDelegates(
        text: (initialText) => '**$initialText**',
        values: [
          ValueDelegate.color(
            const ['灯泡', '灯泡', '填充 1'],
            value: colorList[i],
          ),
          ValueDelegate.gradientColor(
            const ['灯台', '灯台', 'Gradient Fill 1'],
            value: [Colors.black, Colors.grey],
          ),
          ValueDelegate.gradientColor(
            const ['灯光', '灯光', 'Gradient Fill 2'],
            value: [colorList[i], Colors.white],
          ),
        ],
      ),
    );
  }
cjl84914 commented 9 months ago

@xvrh Thank you! It is helpful that set a key.