如何使用 AnimatedContainer 进行动画转换（例如缩放）

Question

我希望使用 transform property of an AnimatedContainer 为容器的比例设置动画；但是，比例没有过渡，而是直接从头跳到尾。

代码片段：

var container = new AnimatedContainer(
  duration: const Duration(milliseconds: 200),
  width: 50.0,
  height: 50.0,
  // selected is a bool that will be toggled
  transform: selected ? new Matrix4.identity() : new Matrix4.identity().scaled(0.2,0.2),
  decoration: new BoxDecoration(
    shape: BoxShape.circle,
    backgroundColor: Colors.blue[500],
  ),
  child: new Center(
    child: new Icon(
      Icons.check,
      color: Colors.white,
    ),
  )
);

对正在发生的事情有任何见解吗？

Answer 1

恐怕 transform 是我们不设置动画的属性之一（child 是另一个）。如果要为比例设置动画，可以使用 ScaleTransition。

缩放转换：https://docs.flutter.io/flutter/widgets/ScaleTransition-class.html

矩阵 lerp 的错误：https://github.com/flutter/flutter/issues/443

Answer 2

您可以使用 Animated Builder 制作动画，下面的代码将在 4 秒内从字体大小 20-35 缩放文本让我将其分成几个步骤以使您更好地理解

1.you 需要从 TickerProviderStateMixin 实现你的 class。

2.You 需要一个 AnimationController 和一个 Animation 变量；

3.wrap 你的 widget 在一个 AnimatedBuilder 中（注意 AnimatedBuilder 必须 return 一个 Widget 至少一个容器）并且添加一个控制器到动画中作为

animation: _controller,

and builder returnAnimatedWidget

4.In init 方法使用 vsync 和动画持续时间初始化控制器。并且带有 Tweenit 的动画采用开始和结束值，这些值定义要动画化的 Widget 的初始值和最终值

对我来说，在这种情况下，它是文本小部件，因此开始和结束值将对应于 fontSize.which 接收变量值 animation.value

5.Finally你想要怎样的动画效果由控制器中的animate和Curve effect指定

这是一个工作示例

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<SplashScreen>
    with TickerProviderStateMixin {

  AnimationController _controller;
  Animation _animation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xFF005CA9),
        body: Center(
          child: AnimatedBuilder(
            animation: _controller,
            builder: (BuildContext context, Widget child) {
              return Container(
                child: Text(
                  'Hello World',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: _animation.value,
                      ),
                ),
              );
            },
          ),
        ));
  }

  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 4));
    _animation = Tween<double>(
      begin: 20,
      end: 35,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.ease,
      ),
    );
    _controller.forward();
  }
}

上面的代码产生以下输出

Answer 3

AnimatedContainer 支持对它的变换值进行动画处理，如下所示：

/// scale to 95%, centerred
final width = 200.0;
final height = 300.0;
bool shouldScaleDown = true;// change value when needed
AnimatedContainer(
  color: Colors.blueAccent,
  width: width,
  height: height,
  duration: Duration(milliseconds: 100),
  transform: (shouldScaleDown
      ? (Matrix4.identity()
        ..translate(0.025 * width, 0.025 * height)// translate towards right and down
        ..scale(0.95, 0.95))// scale with to 95% anchorred at topleft of the AnimatedContainer
      : Matrix4.identity()),
  child: Container(),
);

如何使用 AnimatedContainer 进行动画转换（例如缩放）

How to use an AnimatedContainer for animated transforms (ex. Scale)

dart

flutter