【Flutter学习笔记】9.7 动画过渡组件

参考资料:《Flutter实战·第二版》9.7 动画过渡组件


"动画过渡组件"指的是在Widget属性发生变化时会执行过渡动画的组件,其最明显的一个特征就是会在内部管理一个AnimationControllercontroller定义了过渡动画的时长,而animation对象的定义过程中会指明动画的曲线、添加监听,通过Tween对象指明动画的区间起止值。

9.7.1 自定义动画过渡组件

要实现一个AnimatedDecoratedBox,它可以在decoration属性发生变化时,从旧状态变成新状态的过程可以执行一个过渡动画。想要实现一个外观改变过渡的组件,首先需要定义一个Stateful Widget,并提供需要输入的参数,包含、子Widget、曲线样式等,完整的实现代码如下:

dart 复制代码
import 'dart:ui';

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'TEAL WORLD'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(
          widget.title,
          style: TextStyle(
              color: Colors.teal.shade800, fontWeight: FontWeight.w900),
        ),
        actions: [
          ElevatedButton(
            child: const Icon(Icons.refresh),
            onPressed: () {
              setState(() {});
            },
          )
        ],
      ),
      body: const AnimatedTestRoute(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(
          Icons.add_box,
          size: 30,
          color: Colors.teal[400],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class AnimatedTestRoute extends StatefulWidget {
  const AnimatedTestRoute({super.key});

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

class AnimatedTestRouteState extends State<AnimatedTestRoute> with SingleTickerProviderStateMixin {
  Color _decorationColor = Colors.blue;
  var duration = const Duration(seconds: 1);
  @override
  Widget build(BuildContext context) {
    return AnimatedDecoratedBox1(
      duration: duration,
      decoration: BoxDecoration(color: _decorationColor),
      child: TextButton(
        onPressed: () {
          setState(() {
            _decorationColor = Colors.red;
          });
        },
        child: const Text(
          "AnimatedDecoratedBox",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

class AnimatedDecoratedBox1 extends StatefulWidget {
  const AnimatedDecoratedBox1({
    Key? key,
    required this.decoration,
    required this.child,
    this.curve = Curves.linear,
    required this.duration,
    this.reverseDuration,
  }) : super(key: key);

  final BoxDecoration decoration;
  final Widget child;
  final Duration duration;
  final Curve curve;
  final Duration? reverseDuration;

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

class AnimatedDecoratedBox1State extends State<AnimatedDecoratedBox1>
    with SingleTickerProviderStateMixin {
  @protected
  AnimationController get controller => _controller;
  late AnimationController _controller;

  Animation<double> get animation => _animation;
  late Animation<double> _animation;

  late DecorationTween _tween;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return DecoratedBox(
          decoration: _tween.animate(_animation).value,
          child: child,
        );
      },
      child: widget.child,
    );
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: widget.duration,
      reverseDuration: widget.reverseDuration,
      vsync: this,
    );
    _tween = DecorationTween(begin: widget.decoration);
    _updateCurve();
  }

  void _updateCurve() {
    _animation = CurvedAnimation(parent: _controller, curve: widget.curve);
  }

  @override
  void didUpdateWidget(AnimatedDecoratedBox1 oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.curve != oldWidget.curve) _updateCurve();
    _controller.duration = widget.duration;
    _controller.reverseDuration = widget.reverseDuration;
    //正在执行过渡动画
    if (widget.decoration != (_tween.end ?? _tween.begin)) {
      _tween
        ..begin = _tween.evaluate(_animation)
        ..end = widget.decoration;

      _controller
        ..value = 0.0
        ..forward();
    }
  }

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

Flutter中,动画的产生是伴随Widget重构的,animation的值是一直变化的,但是只有Widget重建时UI界面才会随之变化。

初始化阶段,在使用AnimatedDecoratedBox组件的位置定义了样式类型和执行时长,传入组件后initState()方法中定义_controller_tween对象,随后定义_animation,此时动画还没有执行,且_tween的结束样式还没有定义。

然后通过build()方法构建UI界面,传入定义好的_animation对象并通过_tween.animate()方法取值设置盒子颜色,因为此时动画没执行,所以盒子是静止蓝色的。child元素是一个按钮,其按下时能够改变传入参数_decorationColor,使其变为红色。didUpdateWidget()方法在build()结束后会被调用进行一次重新构建(似乎是由鼠标hover引起的,暂时原因不明),但当前的参数并没有变化,而且widget.decoration的值还是蓝色,因此界面没有任何变化。通过在控制台打印信息可以印证该结论:

按钮还没有按下时(此时_tween.end==null_tween.begin为初始值),条件if (widget.decoration != (_tween.end ?? _tween.begin))不成立,不进行动画触发;

按钮按下时,由于AnimatedDecoratedBox的外部参数发生了变化,触发了didUpdateWidget()方法,此时上面的条件就成立了,也因此设置好了起止状态并开始了插值动画。动画进行时,子Widget(按钮)会不断的重新build,从控制台打印信息可以观察这一现象:

bash 复制代码
AnimatedDecoratedBox initState - decoration = BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3)))
AnimatedDecoratedBox build
Child build! - animated color = BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - decoration color = BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - begin=BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - end=null
didUpdateWidget
AnimatedDecoratedBox build
Child build! - animated color = BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - decoration color = BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - begin=BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - end=null
didUpdateWidget
AnimatedDecoratedBox build
Child build! - animated color = BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - decoration color = BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))) - begin=BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - end=BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336)))
Child build! - animated color = BoxDecoration(color: Color(0xff2295f1)) - decoration color = BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))) - begin=BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - end=BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336)))
...
Child build! - animated color = BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))) - decoration color = BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))) - begin=BoxDecoration(color: MaterialColor(primary value: Color(0xff2196f3))) - end=BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336)))

应该注意的是,一般定义动画组件对象的方法都是内部定义controller和animation对象,只应用控制动画播放、反向播放等逻辑即可,其起止状态已知 ;但起止状态需要动作触发、且需要外部参数的组件,需要获取到终止状态才能进行动画。

上面例子的最终效果如图所示:

但上面的代码中,_controller的管理以及_tween的更新代码是可以通用的,Flutter中提供了已经封装好的基类ImplicitlyAnimatedWidget可以帮我们轻松地实现上述功能。AnimationController的管理就在ImplicitlyAnimatedWidgetState类中。如果要封装动画,要分别继承ImplicitlyAnimatedWidgetImplicitlyAnimatedWidgetState类。下面将介绍如何使用这两个类来实现同样的变色按钮。

首先继承ImplicitlyAnimatedWidget类,构造函数需要定义好要传入的参数和子Widget,父类中已经定义好了curvedurationreverseDuration这三个属性,其中duration为必传参数,curve的初始值为线性渐变:

dart 复制代码
class AnimatedDecoratedBox extends ImplicitlyAnimatedWidget {
  const AnimatedDecoratedBox({
    Key? key,
    required this.decoration,
    required this.child,
    Curve curve = Curves.linear,
    required Duration duration,
  }) : super(
          key: key,
          curve: curve,
          duration: duration,
        );
  final BoxDecoration decoration;
  final Widget child;

  @override
  _AnimatedDecoratedBoxState createState() {
    return _AnimatedDecoratedBoxState();
  }
}

其次,状态对象继承AnimatedWidgetBaseState(该类继承自ImplicitlyAnimatedWidgetState类)类。其中实现了build()forEachTween()两个方法,build()中直接通过animation的值构建每个动画帧内的子Widget,而forEachTween()则用来定义Tween对象的起止值。终止值是通过参数获取的,但初始值是有两种情况的:

  1. AnimatedDecoratedBox首次build,此时直接将其decoration值置为起始状态,和上面的描述相同 。
  2. AnimatedDecoratedBox的decoration更新时,则起始状态需要设置成当前的_tween.evaluate(_animation)值,显然这可能是一个在变化中的值。这个很难想,什么时候decoration会更新。首先只有当didUpdateWidget()触发的时候才会进行判断,也就是此刻外部传入的decoration发生了变化。无论在动画结束还是动画进行中,当终止状态发生改变时,要重新设置起点并开始动画。

继承AnimatedWidgetBaseState的代码如下:

dart 复制代码
class _AnimatedDecoratedBoxState
    extends AnimatedWidgetBaseState<AnimatedDecoratedBox> {
  late DecorationTween _decoration = DecorationTween(begin: widget.decoration);

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: _decoration.evaluate(animation),
      child: widget.child,
    );
  }

  @override
  void forEachTween(TweenVisitor<dynamic> visitor) {
    _decoration = visitor(
      _decoration,
      widget.decoration,
      (value) => DecorationTween(begin: value),
    ) as DecorationTween;
  }
}

初始化时,通过(value) => DecorationTween(begin: value)构建Tween对象,只有起始值。而中间如果_decoration有变化,则更新起始值。其中visitor的定义如下:

dart 复制代码
 Tween<T> visitor(
   Tween<T> tween, //当前的tween,第一次调用为null
   T targetValue, // 终止状态
   TweenConstructor<T> constructor,//Tween构造器,在上述三种情况下会被调用以更新tween
 );

实现效果依然和之前一样:

为了验证上面的第二点,可以做一个小实验,可以在调用 AnimatedDecoratedBox组件的地方再设计一个按钮,用于改变当前decoration参数的值,假设这里点击后decoration会变为绿色。当按钮颜色变化中或者变化结束时可以点击按钮观察颜色,这样就能判断"不同初始值"的含义了:

dart 复制代码
import 'dart:ui';

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'TEAL WORLD'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(
          widget.title,
          style: TextStyle(
              color: Colors.teal.shade800, fontWeight: FontWeight.w900),
        ),
        actions: [
          ElevatedButton(
            child: const Icon(Icons.refresh),
            onPressed: () {
              setState(() {});
            },
          )
        ],
      ),
      body: const AnimatedTestRoute(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(
          Icons.add_box,
          size: 30,
          color: Colors.teal[400],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class AnimatedTestRoute extends StatefulWidget {
  const AnimatedTestRoute({super.key});

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

class AnimatedTestRouteState extends State<AnimatedTestRoute> with SingleTickerProviderStateMixin {
  Color _decorationColor = Colors.blue;
  var duration = const Duration(seconds: 2);
  @override
  Widget build(BuildContext context) {
    return Row(children: [
      Expanded(child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedDecoratedBox(
            duration: duration,
            decoration: BoxDecoration(color: _decorationColor),
            child: TextButton(
              onPressed: () {
                setState(() {
                  _decorationColor = Colors.red;
                });
              },
              child: const Text(
                "AnimatedDecoratedBox",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          const SizedBox(height: 20.0,),
          TextButton(onPressed: (){setState(() {
            _decorationColor = Colors.green;
          });}, child: const Text("Change Color!"))
        ],
      ))
    ],);
  }
}

class AnimatedDecoratedBox extends ImplicitlyAnimatedWidget {
  const AnimatedDecoratedBox({
    Key? key,
    required this.decoration,
    required this.child,
    Curve curve = Curves.linear,
    required Duration duration,
  }) : super(
    key: key,
    curve: curve,
    duration: duration,
  );
  final BoxDecoration decoration;
  final Widget child;

  @override
  AnimatedDecoratedBoxState createState() {
    return AnimatedDecoratedBoxState();
  }
}

class AnimatedDecoratedBoxState
    extends AnimatedWidgetBaseState<AnimatedDecoratedBox> {
  late DecorationTween _decoration = DecorationTween(begin: widget.decoration);

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: _decoration.evaluate(animation),
      child: widget.child,
    );
  }

  @override
  void forEachTween(TweenVisitor<dynamic> visitor) {
    _decoration = visitor(
      _decoration,
      widget.decoration,
          (value) => DecorationTween(begin: value),
    ) as DecorationTween;
  }
}

为了便于观察,我们可以把duration设置为2s,此时,如果在按钮完全变成红色后,点击下面的按钮,颜色就会从红色变成绿色:

如果在变色过程中点击下面的按钮,就会从蓝红中间的某个过渡色再花上2s变成绿色:

9.7.2 Flutter预置的动画过渡组件

Flutter SDK中也预置了很多动画过渡组件,实现方式和大都和AnimatedDecoratedBox差不多:

组件名 功能
AnimatedPadding 在padding发生变化时会执行过渡动画到新状态
AnimatedPositioned 配合Stack一起使用,当定位状态发生变化时会执行过渡动画到新的状态。
AnimatedOpacity 在透明度opacity发生变化时执行过渡动画到新状态
AnimatedAlign 当alignment发生变化时会执行过渡动画到新的状态。
AnimatedContainer 当Container属性发生变化时会执行过渡动画到新的状态。
AnimatedDefaultTextStyle 当字体样式发生变化时,子组件中继承了该样式的文本组件会动态过

可以通过下面的示例代码来查看具体运行效果:

dart 复制代码
import 'package:flutter/material.dart';

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

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

class _AnimatedWidgetsTestState extends State<AnimatedWidgetsTest> {
  double _padding = 10;
  var _align = Alignment.topRight;
  double _height = 100;
  double _left = 0;
  Color _color = Colors.red;
  TextStyle _style = const TextStyle(color: Colors.black);
  Color _decorationColor = Colors.blue;
  double _opacity = 1;

  @override
  Widget build(BuildContext context) {
    var duration = const Duration(milliseconds: 400);
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              setState(() {
                _padding = 20;
              });
            },
            child: AnimatedPadding(
              duration: duration,
              padding: EdgeInsets.all(_padding),
              child: const Text("AnimatedPadding"),
            ),
          ),
          SizedBox(
            height: 50,
            child: Stack(
              children: <Widget>[
                AnimatedPositioned(
                  duration: duration,
                  left: _left,
                  child: ElevatedButton(
                    onPressed: () {
                      setState(() {
                        _left = 100;
                      });
                    },
                    child: const Text("AnimatedPositioned"),
                  ),
                )
              ],
            ),
          ),
          Container(
            height: 100,
            color: Colors.grey,
            child: AnimatedAlign(
              duration: duration,
              alignment: _align,
              child: ElevatedButton(
                onPressed: () {
                  setState(() {
                    _align = Alignment.center;
                  });
                },
                child: const Text("AnimatedAlign"),
              ),
            ),
          ),
          AnimatedContainer(
            duration: duration,
            height: _height,
            color: _color,
            child: TextButton(
              onPressed: () {
                setState(() {
                  _height = 150;
                  _color = Colors.blue;
                });
              },
              child: const Text(
                "AnimatedContainer",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          AnimatedDefaultTextStyle(
            child: GestureDetector(
              child: const Text("hello world"),
              onTap: () {
                setState(() {
                  _style = const TextStyle(
                    color: Colors.blue,
                    decorationStyle: TextDecorationStyle.solid,
                    decorationColor: Colors.blue,
                  );
                });
              },
            ),
            style: _style,
            duration: duration,
          ),
          AnimatedOpacity(
            opacity: _opacity,
            duration: duration,
            child: TextButton(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.blue)),
              onPressed: () {
                setState(() {
                  _opacity = 0.2;
                });
              },
              child: const Text(
                "AnimatedOpacity",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          AnimatedDecoratedBox1(
            duration: Duration(
                milliseconds: _decorationColor == Colors.red ? 400 : 2000),
            decoration: BoxDecoration(color: _decorationColor),
            child: Builder(builder: (context) {
              return TextButton(
                onPressed: () {
                  setState(() {
                    _decorationColor = _decorationColor == Colors.blue
                        ? Colors.red
                        : Colors.blue;
                  });
                },
                child: const Text(
                  "AnimatedDecoratedBox toggle",
                  style: TextStyle(color: Colors.white),
                ),
              );
            }),
          )
        ].map((e) {
          return Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: e,
          );
        }).toList(),
      ),
    );
  }
}


已有的过渡组件,可以直接通过定义参数的方式进行设置,而完全无需担心动画相关逻辑的维护,为开发带来了极大的便利。通过自定义组件,可以更深入地理解动画过渡组件的实现原理,以达到更为复杂的动画过渡效果。

相关推荐
风尚云网15 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
熙曦Sakura1 小时前
完全竞争市场
笔记
EterNity_TiMe_2 小时前
【论文复现】(CLIP)文本也能和图像配对
python·学习·算法·性能优化·数据分析·clip
sanguine__2 小时前
java学习-集合
学习
lxlyhwl2 小时前
【STK学习】part2-星座-目标可见性与覆盖性分析
学习
nbsaas-boot2 小时前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
学习·chatgpt·编辑器
dr李四维2 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
旭日猎鹰2 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰2 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神2 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid