如何在Flutter中将Curves类动画添加到AnimationController？ [英] How do you add a Curves class animation to AnimationController in Flutter?

问题描述

我正在尝试将曲线类动画'Curves.bounceOut'添加到使用AnimationController的代码中。

I'm trying to add the curves class animation 'Curves.bounceOut' to my code that uses an AnimationController.

这是我的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  var squareScale = 1.0;
  static AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
        vsync: this,
        lowerBound: 0.5,
        upperBound: 1.0,
        duration: Duration(milliseconds: 300));

    _controller.addListener(() {
      setState(() {
        squareScale = _controller.value;
      });
    });

    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bounce Example"),
      ),
      body: Stack(
        children: <Widget>[
          Container(
            width: 150.0,
            height: 150.0,
            color: Colors.yellowAccent,
          ),
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      _controller.forward(from: 0.0);
                    },
                    child: Transform.scale(
                      scale: squareScale,
                      child: Container(
                        width: 150.0,
                        height: 150.0,
                        color: Colors.green,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

当前绿色容器的动画从0.5缩放到1.0缩放但不会反弹。如何添加'Curves.bounceOut'动画，以便在点击时容器反弹？

Currently the green container animates from 0.5 scale to 1.0 scale but does not bounce. How can I add the 'Curves.bounceOut' animation so the container bounces when tapped?

在此先感谢您的帮助！

推荐答案

您将要同时使用动画控制器和补间，这将允许您添加 Curves.bounceOut 。

You'll want to use both an animation controller and a tween, which will allow you to add Curves.bounceOut.

在代码中的某些位置添加：

Somewhere in your code add:

AnimationController _controller;
var scaleAnimation;

在您的 initState（）方法中：

_controller = new AnimationController(
 duration: new Duration(milliseconds: 300),
 vsync: this
)
..addListener(() {
  setState(() {});
});
scaleAnimation = new Tween(
  begin: 0.5,
  end: 1.0,
).animate(new CurvedAnimation(
  parent: _controller,
  curve: Curves.bounceOut
));

请注意 .. addListener（）是不错的dart代码，可让您轻松添加侦听器。补间基本上是告诉您的动画，它需要从开始中的值到 end 中的值 AnimationController 中给出的时间范围。要在代码中使用此值，您现在可以设置动画结果的比例：

Note the ..addListener() is a nice bit of dart code that allows you to add a listener easily. The Tween is basically telling your animation that it needs to go from the value in begin to the value in end within the timeframe given in the AnimationController. To use this value in your code you can now just set the scale of your result of your animation:

child: Transform.scale(
  scale: scaleAnimation.value,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
),

以及调用动画时

编辑：

将窗口小部件更改为此：

Change your widget to this:

child: isChanging ? Transform.scale(
  scale: scaleAnimation.value,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
) : Transform.scale(
  scale: 1.0,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
),

保持开始和 end 参数为 0.5 和 1.0 ，但是在转发控制器之前，在您的 onTap（）方法中添加：

Keep your begin and end parameters as 0.5 and 1.0 respectively, but in your onTap() method before you forward your controller add:

onTap: () {
  setState(() {
    isChanging = true
  });
  _controller.forward(from: 0.0);
}

在代码中的任何位置添加 bool isChanging行。最后，您需要在动画结束时重置显示的小部件，因此将scaleAnimation更改为：

And anywhere in your code add the line bool isChanging. Finally you'll want to reset the shown widget at the end of your animation, so change your scaleAnimation to:

child: Transform.scale(
  scale: scaleAnimation.value,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
)..addStatusListener((AnimationStatus status) {
  if (status == AnimationStatus.completed) { //the animation is finished
    _controller.reset();
    setState(() {
      isChanging = false;
    }
  }
});

这篇关于如何在Flutter中将Curves类动画添加到AnimationController？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！