在启动画面中淡入淡出图像。

Question

我正在尝试在启动画面中使Logo淡入，然后淡出。 之后，它将被重定向到另一个页面。 我找不到一种同时实现淡入和淡出的方法。 我也不想使用任何依赖来完成这个任务。 我已经尝试过更改未来以接受参数，但它没有起作用。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:shopperbr1/t.dart';

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  bool animate = false;

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

  Future fadeInAnimation() async {
    await Future.delayed(const Duration(seconds: 2));

    setState(() {
      animate = true;
    });

    await Future.delayed(const Duration(seconds: 2));

    Get.offAll(() => const t());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedOpacity(
              duration: const Duration(seconds: 1),
              opacity: animate ? 1 : 0,
              child: const Image(
                image: AssetImage('assets/images/transparent_logo.png'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

任何帮助都将不胜感激。

- Rod Rodrigues

Answer 1

你可以试试这样做吗？

import 'package:flutter/material.dart';

class FadeTransitionDemo extends StatefulWidget {
  _FadeTransitionDemoState createState() => _FadeTransitionDemoState();
}

class _FadeTransitionDemoState extends State<FadeTransitionDemo>
    with TickerProviderStateMixin {

  AnimationController _controller;
  Animation<double> _animation;

  initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,

    )..repeat(reverse:true);
    _animation = CurvedAnimation(
        parent: _controller,
        curve: Curves.easeIn
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text( 'FadeTransition Demo',),
      ),
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Hello world",style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold),
              ),
              Image.asset("assets/devs.jpg"),
            ],
          ),
        ),
      ),
    );
   }
}

希望这能帮到你！

- inkredusk

Answer 2

这是我的看法。我正在使用package:flutter_animate，强烈推荐。通过将completer传递到闪屏界面中，我知道动画何时完成。同时，任何在await done.future之上等待的内容都将与动画并行运行。确保动画的结尾值得一等，因为任何耗时更长的事情都会延迟转换到真正的主应用程序，同时保持动画的最终帧。

import 'dart:async';
    
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';

Future<void> main() async {
  final done = Completer<void>();
  runApp(BigRedOne(done: done));
  // other async stuff goes here
  await done.future;
  runApp(
    const MyApp(),
  );
}

class BigRedOne extends StatelessWidget {
  const BigRedOne({
    required this.done,
    super.key,
  });
  final Completer<void> done;

  @override
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: SizedBox.expand(
          child: ColoredBox(
            color: Colors.red,
            child: FittedBox(
              child: const Text('1')
                  .animate(onComplete: (_) => done.complete())
                  .fadeIn(duration: 2000.ms)
                  .then()
                  .fadeOut(),
            ),
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Text('Hello World'),
      ),
    );
  }
}

- Randal Schwartz

Answer 3

在 Flutter 文档 https://api.flutter.dev/flutter/widgets/FadeTransition-class.html https://docs.flutter.dev/development/ui/animations/tutorial 完成小部件动画后在 Flutter 中运行函数 以及 @inkredusk 的帮助下，我成功地得到了我想要的结果。谢谢！

class SplashScreen extends StatefulWidget {
_SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  
late AnimationController _controller;
late Animation<double> _animation;

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

_controller = AnimationController(
  duration: const Duration(seconds: 5),
  vsync: this,
);

//_animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);

_animation = Tween<double>(begin: 0, end: 1).animate(_controller)
  ..addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      _controller.reverse().then((value) => Get.offAll(() => const t()));
    }
  })
  ..addStatusListener((status) => print('$status'));

_controller.forward();
}

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

@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: Center(
    child: FadeTransition(
      opacity: _animation,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset('assets/images/transparent_logo.png'),
        ],
      ),
    ),
  ),
);
}
}

- Rod Rodrigues

Answer 4

我尽量保持简单。

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

 @override
State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen>
  with SingleTickerProviderStateMixin {
 late AnimationController _controller;
 late Animation<double> _animation;

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

_controller = AnimationController(
  duration: const Duration(seconds: 1),
  vsync: this,
);

//_animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);

_animation = Tween<double>(begin: 0, end: 1).animate(_controller)
  ..addStatusListener(
    (status) {
      if (status == AnimationStatus.completed) {
        _controller.reverse().then(
              (value) => Navigator.pushAndRemoveUntil(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const AuthCheck(),
                  ),
                  (route) => false),
            );
        }
      },
    )
    ..addStatusListener(
      (status) => print('$status'),
    );

  _controller.forward();
}

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Center(
      child: FadeTransition(
        opacity: _animation,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/images/transparent_logo.png'),
          ],
        ),
      ),
    ),
  );
}
}

- Rod Rodrigues