如何在 Flutter 中制作一个简单的圆形比例动画来超越典型的静态启动屏幕？

Question

嗨，我想创建一个像 uber 动画一样的动画 (Video url)。将重定向到 youtube

我试过的。

动画容器
动画大小
缩放动画
动画生成器
叠加条目

在所有情况下，我都尝试将半径的上限设置得太高以致于无法适应屏幕，但最大半径仅为设备宽度的一半。这是输出

如果需要任何代码，请评论。

Answer 1

我做了一个例子..这是工作。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: FirstScreen()
        ),
      ),
    );
  }
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {

  bool start = false;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(milliseconds: 200)).then((value) {
      setState(() {
        start = true;
      });
      Future.delayed(Duration(milliseconds: 700)).then((value) {
        Navigator.push(context, ScaleRoute(page: (RedPage())));
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(child:
    OverflowBox(
      maxHeight: MediaQuery.of(context).size.longestSide * 2,
      maxWidth: MediaQuery.of(context).size.longestSide * 2,
      child: AnimatedContainer(
        curve: Curves.easeIn,
        duration: Duration(milliseconds: 700),
        width: start ? MediaQuery.of(context).size.longestSide * 2 : 0,
        height: start ? MediaQuery.of(context).size.longestSide * 2 : 0,
        decoration: BoxDecoration(
            color: /*start ?*/ Colors.red /*: Colors.black */,
            shape: BoxShape.circle
        ),
        child: Center(child: Text("uber")),
      ),
    ));
  }
}

class RedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red,child: Center(child: Text("I am RedPage",style: TextStyle(color: Colors.black),)),);
  }
}

class ScaleRoute extends PageRouteBuilder {
  final Widget page;
  ScaleRoute({this.page})
      : super(
    pageBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        ) =>
    page,
    transitionsBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child,
        ) {
      return ScaleTransition(
          scale: Tween<double>(
            begin: 0.0,
            end: 1.0,
          ).animate(
            CurvedAnimation(
              parent: animation,
              curve: Curves.fastOutSlowIn,
            ),
          ),
          child: child,
        );
    },
  );
}

工作原理

我添加了一个 overflowBox 因为我们想要创建一个比屏幕大的大圆圈...所以我们应该使用它。用于创建动画圆圈的动画容器...... 这个动画在小部件显示后 200 毫秒开始（初始状态） 700 毫秒后我们更改页面 (Navigator)

 Future.delayed(Duration(milliseconds: 200)).then((value) {
  setState(() {
    start = true;
  });
  Future.delayed(Duration(milliseconds: 700)).then((value) {
    Navigator.push(context, ScaleRoute(page: (RedPage())));
  });
});

和 ScaleRoute class 用于使用动画更改页面有关动画过渡的更多信息，您可以阅读这篇漂亮的文章 https://medium.com/flutter-community/everything-you-need-to-know-about-flutter-page-route-transition-9ef5c1b32823

如何在 Flutter 中制作一个简单的圆形比例动画来超越典型的静态启动屏幕？

How to make a simple circle scale animation to go beyond the typical static launch screen in flutter?

animation

flutter

flutter-animation