Flutter record learning different animation (2)

一、AnimatedWidget 简介

AnimatedWidget Base class can distinguish core from the animation code widget 代码. AnimatedWidget 不需要保持 State 对象来 hold 动画.AnimatedWidget 帮助类（代替 addListener() 和 setState()）创建动画 widget.
利用 AnimatedWidget Create an animation can run the reuse widget.
Flutter API 中的 AnimatedWidget：AnimatedBuilder, RotationTransition, ScaleTransition, SizeTransition, SlideTransition.

二、AnimatedWidget 动画示例

From a rectangular wide high shrinkage

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

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

class _MyAnimationWidgetState extends State<MyAnimationWidget>
    with SingleTickerProviderStateMixin {
    
  late AnimationController controller;
  late Animation<double> animation;

  @override
  initState() {
    
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = Tween(begin: 0.0, end: 300.0).animate(controller);
    controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      body: Center(
        child: AnimationLogo(animation),
      ),
    );
  }
}

class AnimationLogo extends AnimatedWidget {
    
 const AnimatedLogo({
    super.key, required Animation<double> animation})
      : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    
   final animation = listenable as Animation<double>;
    return Center(
      child: Container(
        height: animation.value,
        width: animation.value,
        color: Colors.red,
      ),
    );
  }
}

三、使用 AnimatedBuilder 进行重构

AnimatedBuilder Know how to render the transition effect

但 AnimatedBuilder 不会渲染 widget,Will not control the animation object.

使用 AnimatedBuilder Describe an animation is other widget Part of the build method.If only need to use reusable animation defines a widget.

Flutter API 中 AnimatedBuilders：BottomSheet, ExpansionTile, PopupMenu, ProgressIndicator, RefreshIndicator, Scaffold, SnackBar, TabBar, TextField.

AnimatedWidget The sample code there is a problem,Is changed animation need to render logo 的widget.Is a better solution,Task is divided into different classes：

a. 渲染 logo

b. 定义动画对象

c. 渲染过渡效果

AnimatedBuilder 动画示例

class _MyAnimationWidgetState extends State<MyAnimationWidget>
    with SingleTickerProviderStateMixin {
    
  late AnimationController controller;
  late Animation<double> animation;

  @override
  initState() {
    
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = Tween(begin: 0.0, end: 300.0).animate(controller);
    controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      body: Center(
        child: AnimationLogo(
          animation,
          child: LogoWidget(),
        ),
      ),
    );
  }
}

class LogoWidget extends StatelessWidget {
    
  const LogoWidget({
    Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    
    return Center(
      child: Container(
        color: Colors.red,
      ),
    );
  }
}

class AnimationLogo extends StatelessWidget {
    
  final Animation<double> animation;
  final Widget child;
  AnimationLogo(this.animation, {
    Key? key, required this.child});

  @override
  Widget build(BuildContext context) {
    
    return AnimatedBuilder(
      animation: animation,
      builder: (BuildContext context, Widget? child) {
    
        return SizedBox(
          height: animation.value,
          width: animation.value,
          child: child,
        );
      },
      child: child,
    );
  }
}

四、总结

从上面代码可以看出widgetAnd animation effects apart,所以AnimatedBuilder进一步将AnimatedWidget 进行分离,It can make the animation effect for reuse,非常不错的.