颤振动画奇怪的行为答案

【问题标题】：Flutter animation weird behavior颤振动画奇怪的行为
【发布时间】：2021-05-13 06:28:26
【问题描述】：

我目前在 Flutter 中遇到了一个奇怪的动画问题。代码如下：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  double age = 0.0;
  int selectedYear;

  AnimationController animationController;
  Animation animation;

  void _showPicker() {
    showDatePicker(
      context: context, 
      initialDate: DateTime.now(), 
      firstDate: DateTime(1900), 
      lastDate: DateTime.now(),
    ).then((dt) {
      setState(() {
        selectedYear = dt.year;
        age = (DateTime.now().year - selectedYear).toDouble();

        animation = Tween<double>(begin: animation.value, end: age).animate(CurvedAnimation(
          parent: animationController, 
          curve: Curves.fastOutSlowIn,
        ));

        animationController.forward();
      });
    });
  }

  @override
  void initState() {
    animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 1500));
    animation = animationController;
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Date Picker"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            OutlineButton(
              child: Text(
                selectedYear == null ? "Choose your date of birth" : "$selectedYear",
                style: TextStyle(
                  color: Colors.brown,
                  fontWeight: FontWeight.bold,
                ),
              ),
              color: Colors.white,
              borderSide: BorderSide(
                color: Colors.brown,
                width: 3.0,
              ),
              onPressed: _showPicker,
            ),
            Padding(
              padding: const EdgeInsets.all(20.0),
            ),
            Text(
              "Your age is ${animation.value.toStringAsFixed(0)}",
              style: TextStyle(
                color: Colors.brown,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                fontSize: 30.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

基本上，它允许用户从日期选择器中选择一个日期，它会在屏幕上显示他们的年龄。但实际上动画是空闲的，没有效果。

编辑：添加了特定于小部件的代码，以便任何人都能够提供帮助

【问题讨论】：

您好。你到底想制作什么动画。发布您的整个小部件代码，以便任何人都能够提供帮助。
我添加了小部件特定代码。
你好，我添加了一个答案，看看吧。

标签： flutter dart animation

【解决方案1】：

通过使用AnimationController，很明显您正在尝试构建所谓的Custom Explicit Animation。

你要明白的是，在 Flutter 中，并不是所有的小部件都能自动监听 Animation<double> 变量的变化。

因此，在构建 Custom Explicit Animations 时，您需要使用 AnimatedBuilder 或 AnimatedWidget。

因此，在您的代码中，只需将您想要动画的 Text 小部件包装在 AnimatedBuilder 中，就像这样，

AnimatedBuilder(
    animation: animation,
    builder: (_, __) {
        return Text(
            "Your age is ${animation.value.toStringAsFixed(0)}",
            style: TextStyle(
                color: Colors.brown,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                fontSize: 30.0,
             ),
         );
     }
),

现在您应该可以为您的 Text 小部件设置动画了。

有关 Flutter 中动画的更多信息。参考这个Video或者这个Article

【讨论】：