使用动画控制器的 Flutter 重复淡入淡出动画

jv4diomz  于 2023-05-19  发布在  Flutter
关注(0)|答案(2)|浏览(205)

所以我想做一些类似的微光,但它只是褪色,而不是像这个包https://pub.dev/packages/fade_shimmer滑动褪色,但因为它没有孩子的属性,所以我想做我自己的动画,我只是想创建一个容器,有 Flink 效果的动画,我认为它只改变不透明度,但我不知道。这是我的代码

late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1200),
    );

    _animation = Tween<double>(begin: 1, end: 0.3).animate(_animationController)
      ..addListener(() {
        _animationController
            .forward()
            .then((value) => _animationController.reverse());
        setState(() {});
        log('animation value === ${_animation.value}');
      });
  }

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

Container(
      height: widget.height,
      width: widget.width,
      clipBehavior: Clip.antiAlias,
      margin: EdgeInsets.fromLTRB(widget.marginLeft ?? 0, widget.marginTop ?? 0,
          widget.marginRight ?? 0, widget.marginBottom ?? 0),
      decoration: BoxDecoration(
        color: widget.altColor
            ? MyThemes.colorBrown
            : MyThemes.colorLightBrown.withOpacity(_animation.value),
        borderRadius: widget.radius != null
            ? BorderRadius.all(
                Radius.circular(widget.radius ?? 0),
              )
            : BorderRadius.vertical(
                bottom: Radius.circular(widget.radiusBottom ?? 0),
                top: Radius.circular(widget.radiusTop ?? 0),
              ),
      ),
      child: widget.child,
    );

xsuvu9jc

xsuvu9jc1#

这就是我能产生的 Flink 效果。您可以根据需要更改持续时间。
Link to the output

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  late AnimationController _animationController;
  late Animation<double> _animation;

  Timer? timer;

    @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this, duration: const Duration(seconds: 2));
    _animation = Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(
      parent: _animationController,
      curve: Interval(0, 0.6, curve: Curves.easeIn),
    ))
      ..addListener(() async {
        if (_animationController.isCompleted) timer = Timer(const Duration(seconds: 0), () => mounted ? _animationController.forward(from: 0) : null);
        setState(() {});

      });
    _animationController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        margin: const EdgeInsets.all(12),
        height: 200,
        width: 200,
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(_animation.value),
        ),
        child: Container(
          child: const Text('My Animation'),
        ),
      ),
    );
  }
}
vlurs2pr

vlurs2pr2#

试试这个代码。

@override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1000),
    );

    _animation = Tween<double>(begin: 0.15, end: 1).animate(
        CurvedAnimation(parent: _animationController, curve: Curves.easeIn))
        ..addListener(() {
          if(_animationController.isCompleted){
            _animationController.repeat();
          }
        });
    _animationController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Demo'),
        ),
        body: Center(
            child: AnimatedBuilder(
          animation: _animationController,
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
            child: const Center(
              child: Text('Whee!'),
            ),
          ),
          builder: (BuildContext context, Widget? child) {
            return Opacity(
              opacity: _animation.value,
              child: child,
            );
          },
        ) // This trailing comma makes auto-formatting nicer for build methods.
            ));
  }

相关问题