如何使用flutter向启动画面添加复杂的动画？

Question

我不擅长动画，但想添加动画，例如，有 4 个字母“B”、“C”、“D”和“E”，它们应该从 4 个轴向中心进行动画制作，并制作中心有一个徽标，然后当动画完成时，社交按钮应该从底部开始动画，这就是我想要实现的。

我将添加屏幕，使我的概念更加清晰，我想说的是：

第一眼看到

第二次观看

用于显示启动图像的简单代码

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

  @override
  State<StatefulWidget> createState() {
    return _SplashScreenState();
  }
}

class _SplashScreenState extends State<SplashScreen> {
  Timer? timer;

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

  void navigatePage() async {
    timer = Timer(const Duration(seconds: 2), () async {
      isLoggedIn
          ? Navigator.pushReplacementNamed(context, "home")
          : Navigator.pushReplacementNamed(context, "login");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color(0xffF7F8F8),
        body: Image.asset(
          'assets/images/splash.png',
          fit: BoxFit.cover,
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
        ));
  }

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }
}

Answer 1

您可以使用

AnimatedPositioned

和

AnimatedRotation

来玩：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool animated = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            animated = !animated;
          });
        },
      ),
      body: Stack(
        children: [
          AnimatedPositioned(
            top: animated
                ? MediaQuery.of(context).size.height * .50
                : MediaQuery.of(context).size.height * .75,
            right: animated
                ? MediaQuery.of(context).size.width * .100
                : MediaQuery.of(context).size.width * .50,
            duration: const Duration(seconds: 3),
            child: AnimatedRotation(
              duration: const Duration(seconds: 3),
              turns: animated ? 0.3 : 0.45,
              child: container(color: Colors.green),
            ),
          ),
          AnimatedPositioned(
            top: animated
                ? MediaQuery.of(context).size.height * .25
                : MediaQuery.of(context).size.height * .50,
            right: animated
                ? MediaQuery.of(context).size.width * .25
                : MediaQuery.of(context).size.width * .50,
            duration: const Duration(seconds: 3),
            child: AnimatedRotation(
              duration: const Duration(seconds: 3),
              turns: animated ? 0.3 : 0.1,
              child: container(color: Colors.blue),
            ),
          ),
          AnimatedPositioned(
            top: animated
                ? MediaQuery.of(context).size.height * .75
                : MediaQuery.of(context).size.height * .15,
            right: animated
                ? MediaQuery.of(context).size.width * .50
                : MediaQuery.of(context).size.width * .25,
            duration: const Duration(seconds: 3),
            child: AnimatedRotation(
              duration: const Duration(seconds: 3),
              turns: animated ? -0.3 : 0.13,
              child: container(color: Colors.yellow),
            ),
          ),
        ],
      ),
    );
  }

  Widget container({Color color = Colors.grey}) {
    return Container(
      height: 50,
      width: 50,
      color: color,
    );
  }
}