在按钮点击颤动时播放 lottie 动画

Question

我渲染了以下小部件。

中间的杯子是可以找到的lottie动画here。我正在使用以下包来显示 lottie 动画（它似乎是标准的）pub dev

在我的代码中，我的 lottie 文件加载如下。

Lottie.asset("assets/animations/water.json",
                      height: 120, repeat: false),

我想要实现的是当点击加号按钮时，lottie 文件将播放一次迭代。单击减号按钮时，它将反向播放一次。（我知道有一个相反的属性所以如果我能弄清楚如何让它在一个方向上工作，我就可以实现这个）我尝试创建一个动画控制器，但我几乎没有使用它的经验，并且以下没有做任何事情。

RawMaterialButton(
     onPressed: () {
         _controller.forward();
         _changeWaterIntake(-1);
          },
     elevation: 2.0,
     child: Image.asset(
     "assets/images/subtract.png",
     height: 55,
     ),
shape: CircleBorder(),
                      ),

如有任何帮助或帮助，我们将不胜感激！

Answer 1

因此，您可以执行以下几个步骤来控制 lottie 动画：

第 1 步：在您的状态中为您的动画控制器使用 TickerProviderStateMixin。只需使用 :

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin

第 2 步：声明并初始化您的动画控制器：

 AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
  }

您可以在上面根据需要更改持续时间，添加曲线。

第 3 步：主要任务：将你的 Animation controller 与 lottie 动画绑定并将 repeat 设置为 false。

Container(
              height: 100.0,
              child: Lottie.asset(
                'assets/watermation.json',
                controller: _animationController,
                height: 180,
                repeat: false,
              ),
            ),

第 4 步：有趣的部分只需使用 _animationController 来播放您的动画：

  GestureDetector(
              onTap: () {
                _animationController.forward();
              },
              child: Text('add'),
            ),
            SizedBox(
              height: 100.0,
            ),
            GestureDetector(
              onTap: () {
                _animationController.reverse();
              },
              child: Text('minus'),
            ),

完整州代码：

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Container(
              height: 100.0,
              child: Lottie.asset(
                'assets/watermation.json',
                controller: _animationController,
                height: 180,
                repeat: false,
              ),
            ),
            SizedBox(
              height: 100.0,
            ),
            GestureDetector(
              onTap: () {
                _animationController.forward();
              },
              child: Text('add'),
            ),
            SizedBox(
              height: 100.0,
            ),
            GestureDetector(
              onTap: () {
                _animationController.reverse();
              },
              child: Text('minus'),
            ),
          ],
        ),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }}

因此您可以深入研究文档并了解动画。您可以类似地操作 Lottie 文件并使用它们添加令人惊叹的动画。

希望这就是您想要实现的目标

Answer 2

Krish 评论对我不起作用，但我对工作稍作改动

而不是：

  GestureDetector(
              onTap: () {
                _animationController.forward();
              },
              child: Text('add'),
            ),
            SizedBox(
              height: 100.0,
            ),
            GestureDetector(
              onTap: () {
                _animationController.reverse();
              },
              child: Text('minus'),
            ),

使用：

  GestureDetector(
              onTap: () {
                _animationController.forward();
                                       _animationController = AnimationController(vsync: this);
             },
              child: Text('add'),
            ),
            SizedBox(
              height: 100.0,
            ),
            GestureDetector(
              onTap: () {
                _animationController.reverse();
              },
              child: Text('minus'),
            ),

在按钮点击颤动时播放 lottie 动画

Play lottie animation on button click flutter

flutter

dart

lottie