Flutter开发——动画封装类AnimatedBuilder

在实际项目中，往往会有很多个动画集于一个界面，这时候如果每个界面都实现一遍动画，会出现很多重复代码。那么，Animatedbuilder就可以解决此类问题了。

AnimatedBuilder类继承AnimatedWidget类，所以它可以直接作为一个组件来使用。
AnimatedBuilder不需要知道如何渲染组件的，也不需要知道如何管理动画对象，只需调用build。
使用AnimatedBuilder来实现Logo放大–>缩小无限循环的动画。代码如下：

import 'package:flutter/material.dart';

class AnimatedBuilderPage extends StatefulWidget {
    
    
  final String title;
  const AnimatedBuilderPage({
    
    Key? key, required this.title}) : super(key: key);

  @override
  State<AnimatedBuilderPage> createState() => _AnimatedBuilderPageState();
}

class _AnimatedBuilderPageState extends State<AnimatedBuilderPage>
    with SingleTickerProviderStateMixin {
    
    
  Animation<double>? _animation;
  AnimationController? _animationController;
  @override
  void initState() {
    
    
    super.initState();
    _animationController =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    _animation = Tween(begin: 0.0, end: 200.0).animate(_animationController!)
      ..addStatusListener((status) {
    
    
        if (status == AnimationStatus.completed) {
    
    
          _animationController!.reverse();
        } else if (status == AnimationStatus.dismissed) {
    
    
          _animationController!.forward();
        }
      });
    _animationController!.forward();
  }

  @override
  void dispose() {
    
    
    _animationController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return AnimationEffect(
        animation: _animation!, child: const FlutterLogoWidget());
  }
}

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

  @override
  Widget build(BuildContext context) {
    
    
    return const FlutterLogo();
  }
}

class AnimationEffect extends StatelessWidget {
    
    
  final Widget child;
  final Animation animation;
  const AnimationEffect(
      {
    
    super.key, required this.child, required this.animation});
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('AnimatedBuilder'),
      ),
      body: AnimatedBuilder(
        animation: animation,
        builder: (BuildContext context, Widget? child) {
    
    
          return Center(
            child: SizedBox(
              width: animation.value,
              height: animation.value,
              child: child,
            ),
          );
        },
        child: child,
      ),
    );
  }
}

这样就将动画与执行动画的组件彻底分离了，Widget组件FlutterLogo只做显示用，这样利于后期的维护。
Flutter基于AnimatedBuilder封装了许多动画类，如AnimatedContainer、DecoratedBoxTransition、FadeTransition、RotationTransition和ScaleTransition等。

Flutter开发——动画封装类AnimatedBuilder

猜你喜欢