文本从大变小的 Flutter 动画

Question

我是 flutter dart 的初学者。我查看了一些关于如何实现动画的视频。

我正在尝试制作一个 Text 动画，当应用程序启动时 text 我的应用程序的名称从大文本变为小文本。

这是我的代码，如果有哪位高手可以指点指正我的代码不胜感激 :

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{

   AnimationController controller;
   Animation<double> anima;
   double h=700;
 @override
 void initState() {
  super.initState();
  controller= AnimationController(vsync: this,
  duration: Duration(milliseconds: 600));
  controller.forward();

}

 @override
  Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.amber,
    body: AnimatedContainer(
    width: h != null ? 100 : 700,
    curve: Curves.bounceInOut,
    child: Text('here you are', style: TextStyle(color: Colors.white)),
   ),
  );
 }

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

我正在努力实现图片中从第一张到最后一张从大文字到小文字的效果。

从图1到图5

我真的很感激，我知道这对你们所有人来说并不难，但对我来说真的有点难。谢谢。

Answer 1

为此你可以使用AnimatedTextStyle Var _size = 10;

      AnimatedDefaultTextStyle(
      duration: Duration(milliseconds: 400),
      style: TextStyle(fontSize: _size),
      child: Text('this is a test'),
     );

只需调用 setState 并更改 _size

Answer 2

这可以使用隐式动画小部件轻松实现：TweenAnimationBuilder。

你猜怎么着？你不需要 StatefulWidget

检查这个工作示例。

class AnimTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: TweenAnimationBuilder(
        duration: const Duration(seconds: 5),
        tween: Tween(begin: 700.0, end: 100.0),
        builder: (context, value, child) => Center(
            child: Text('here you are',
            textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white, fontSize: value))),
      ),
    );
  }
}

文本从大变小的 Flutter 动画

Flutter animation with Text going from big to small

flutter

flutter-animation