如何在flutter上制作图标和文字翻译动画

Question

如何在 flutter 上制作这个动画

图标和文字默认状态是图标显示，文本消失单击图标时：图标上升，文本在图标下方出现否则图标会居中并且文本会消失

喜欢这个视频

https://i.imgur.com/S0LXr3o.mp4

https://drive.google.com/file/d/1nwpgjOM_6TUaaVaSdsIZp0oYi4CdWSMR/view?usp=sharing

Answer 1

您可以使用 AnimationController 和 AnimationBuilder 结合 Stack + Positioned 或者您甚至可以使用具有相同概念的 Transform 小部件！

我写了一个例子来制作动画

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class AnimationExerciseScreen extends StatefulWidget {
  const AnimationExerciseScreen({Key? key}) : super(key: key);

  @override
  _AnimationExerciseScreenState createState() =>
      _AnimationExerciseScreenState();
}

class _AnimationExerciseScreenState extends State<AnimationExerciseScreen>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 3),
    );

    animationController.forward();
  }

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

  late final AnimationController animationController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 100,
              child: AnimatedBuilder(
                animation: animationController,
                builder: (context, child) => Stack(
                  children: [
                    Positioned(
                      top: 0 + (40 * animationController.value),
                      child: Icon(Icons.cloud),
                    ),
                    Positioned(
                      bottom: 0 + (40 * animationController.value),
                      child: Opacity(
                        opacity: 1 - animationController.value,
                        child: Text('Cloud'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

视频link： https://imgur.com/RJg5PWw

说明：动画控制器的值是0到1，类型为double，代表动画的数量百分比

在上面的示例中，我使用了 3 秒的动画控制器持续时间，因此动画很容易被我们的眼睛看到，所以我使用 animationController.forward 在 [=17= 处播放动画]

注意：动画的放置并未针对性能进行优化，此示例仅作为示例以了解动画的工作原理如果您想优化动画，可以将小部件放入 AnimationBuilder 的子属性以获取更多信息，您可以阅读它们 here and here and here 等等！您可以浏览大量文章来提高您的 Flutter 应用程序的性能！

如何在flutter上制作图标和文字翻译动画

how to make icon and text translation animation on flutter

flutter

flutter-animation