Flutter：AnimatedBuilder自定义显示动画

1、自定义显示动画，实现淡入淡出

js 复制代码

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  late AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500)
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: Column(
        children: [
          Container(
            child: AnimatedBuilder(
              animation: _controller,
              builder: (context,child){
                return Opacity(
                  // Tween定义显示范围0.5-1.0之前，animate(_controller).value 会在0- 1之间自动切换
                  opacity: Tween(begin: 0.5,end: 1.0).animate(_controller).value,
                  child: Container(
                    width: 200,
                    height: 200,
                    color: Colors.red,
                  ),
                );
              },
            ),
          ),
          ElevatedButton(onPressed: (){
            _controller.forward();
          }, child: const Text('显示')),
          ElevatedButton(onPressed: (){
            _controller.reverse();
          }, child: const Text('隐藏')),
        ],
      ),
    );
  }
}

2、自定义显示动画，实现位移

js 复制代码

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  late AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500)
    );
  }

  @override
  Widget build(BuildContext context) {
    // 可以通过追加chain定义动画曲线
    Animation x =
        Tween(begin: -100.0,end: 100.0)
        .chain(CurveTween(curve: Curves.bounceInOut))
        .animate(_controller);
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: Column(
        children: [
          AnimatedBuilder(
            animation: _controller,
            builder: (context,value){
            return Container(
              width: 100,
              height: 100,
              color: Colors.red,
              // Tween(-100 到100 之间)进行动画
              // animate(_controller).value 从0到1 之间过度
              transform: Matrix4.translationValues(x.value, 0.0, 0.0),
            );
          }),
          ElevatedButton(onPressed: (){
            _controller.forward();
          }, child: const Text('移动')),
          ElevatedButton(onPressed: (){
            _controller.reverse();
          }, child: const Text('还原')),
        ],
      ),
    );
  }
}