Flutter学习之路->透明度动画的5种实现方式

冲啊 呼叫呼叫 想做淡入淡出动画怎么做 下面记录了5种思路

1.自带隐式动画组件

import 'package:flutter/material.dart';

class FadeAnimationOpacity extends StatefulWidget {

  bool visible = true;

  FadeAnimationOpacity({Key? key,required this.visible}) : super(key: key);

  @override
  State<FadeAnimationOpacity> createState() => _FadeAnimationOpacityState();
}

class _FadeAnimationOpacityState extends State<FadeAnimationOpacity> {

  @override
  Widget build(BuildContext context) {
    return AnimatedOpacity(
      opacity: widget.visible ? 1.0 : 0.0, // 设置透明度，0.0 为完全透明，1.0 为完全不透明
      duration:const  Duration(milliseconds: 500), // 设置动画执行时间
      child:const FlutterLogo(size: 100,)
    );
  }
}

2.自定义隐式动画

import 'package:flutter/material.dart';

class FadeTweenWidget extends StatefulWidget {

  bool visible = true;

  FadeTweenWidget({Key? key,required this.visible}) : super(key: key);

  @override
  State<FadeTweenWidget> createState() => _FadeTweenWidgetState();
}

class _FadeTweenWidgetState extends State<FadeTweenWidget> with SingleTickerProviderStateMixin {

  @override
  void initState() {
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
      tween: Tween<double>(begin:widget.visible ? 0.0 : 1.0, end: widget.visible ? 1.0 : 0.0),
      duration:const Duration(milliseconds: 500),
      builder: (context, value, child) {
        return Opacity(
          opacity: value,
          child: child,
        );
      },
      child: FlutterLogo(size: 100)
    )
    ;
  }
}

3.自带显式动画组件

import 'package:flutter/material.dart';

class FadeTransitionWidget extends StatefulWidget {

  bool visible = true;

  FadeTransitionWidget({Key? key,required this.visible}) : super(key: key);

  @override
  State<FadeTransitionWidget> createState() => _FadeTransitionWidgetState();
}

class _FadeTransitionWidgetState extends State<FadeTransitionWidget> with SingleTickerProviderStateMixin {

  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    if (widget.visible) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child:const FlutterLogo(size: 100)
    );
  }
}

4.自定义显式动画

import 'package:flutter/material.dart';

class FadeAnimatedBuilderWidget extends StatefulWidget {

  bool visible = true;

  FadeAnimatedBuilderWidget({Key? key,required this.visible}) : super(key: key);

  @override
  State<FadeAnimatedBuilderWidget> createState() => _FadeAnimatedBuilderWidgetState();
}

class _FadeAnimatedBuilderWidgetState extends State<FadeAnimatedBuilderWidget> with SingleTickerProviderStateMixin {

  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
    if (widget.visible) {
      print('11');
      _controller.forward();
    } else {
      print('22');
      _controller.reverse();
    }
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Opacity(
          opacity: _animation.value,
          child:const FlutterLogo(size: 100)
        );
      },
    );
  }
}

5.自定义淡入淡出动画组件

import 'package:flutter/material.dart';

class CustomAnimatedOpacity extends ImplicitlyAnimatedWidget {
  const CustomAnimatedOpacity(this.child, {
    Key? key,
    required this.opacity,
    required Duration duration,
    Curve curve = Curves.linear,
    VoidCallback? onEnd,
  }) : super(key: key, duration: duration, curve: curve, onEnd: onEnd);

  final double opacity;
  final Widget child;

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

class _CustomAnimatedOpacityState
    extends AnimatedWidgetBaseState<CustomAnimatedOpacity> {

  Tween<double>? _opacity;

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: _opacity?.evaluate(animation) ?? widget.opacity,
      child: widget.child,  // 使用新增的 child 属性
    );
  }

  @override
  void forEachTween(TweenVisitor<dynamic> visitor) {
    _opacity = visitor(_opacity, widget.opacity,
            (dynamic value) => Tween<double>(begin: value as double)) as Tween<double>?;
  }
}

要全套代码请加V:sunyan414361110 一起学习flutter鸭