Flutter：Animation 在頁面加載時自動啟動

Question

只是想知道是否有人可以在這里幫助我。 我確實嘗試自己解決這個問題，但我是 Flutter 的新手，似乎可以解決這個問題。 我有一些 Flutter 代碼（根據下面的鏈接）創建一個帶有波紋 animation 的頁面。 對於我想要做的事情來說，這幾乎是完美的，但是，animation 是從用戶需要按下的 floatingActionButton 激活的。 有人可以更改此代碼，以便 animation 在頁面加載時自動運行嗎？ 我試過了……我真的試過了，但我做不到。 我還查看了其他示例，但無法將它們融合在一起。

這是代碼： https://gist.github.com/MarcinusX/6925808a813e1067c52539068c9978f2

干杯，並提前感謝大家...

Answer 1

這是您想要的完整工作示例。 我很快把它放在一起，所以它可能不是最好的解決方案。 但基本上發生的事情是它在開始時使用了一個簡單的bool值設置為false -

然后，一旦 animation 觸發，它就會將其設置回 false。 我還添加了一個計時器，所以它不會讓用戶感到不安，希望它能讓他們更容易理解他們在用戶界面中的位置。 但是，如果您不喜歡它，可以將其刪除。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:rect_getter/rect_getter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fab overlay transition',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Duration animationDuration = Duration(milliseconds: 300);
  final Duration delay = Duration(milliseconds: 300);
  GlobalKey rectGetterKey = RectGetter.createGlobalKey();
  Rect rect;

  // Handle time
  Timer timer;

  @override
  void initState() {
    // Timer starts here, this is called before the widget tree is built
    timer = Timer(Duration(seconds: 1), () => setState(() {}));
    super.initState();
  }

  // Disposes of timer - this ensures the timer is properly cancelled when this page is pulled from the widget tree
  @override
  void dispose() {
    if (timer != null) timer.cancel();
    super.dispose();
  }


  // This makes sure the animation only runs once
  bool onTapHandler = false;

  @override
  Widget build(BuildContext context) {

    // I moved your functions down here but it doesn't matter where they go in this case I don't think
    void _goToNextPage() {
      Navigator.of(context).push(FadeRouteBuilder(page: NewPage())).then((_) => setState(() => rect = null));
    }

    void onTap() async {
      setState(() => rect = RectGetter.getRectFromKey(rectGetterKey));

      if (rect != null)
        WidgetsBinding.instance.addPostFrameCallback((_) {
          setState(() => rect = rect.inflate(1.3 * MediaQuery.of(context).size.longestSide));
          Future.delayed(animationDuration + delay, _goToNextPage);
        });
    }

    /// Here is where the magic happens
    /// This makes sure both the timer is finished and the that the flag hasn't 
    /// been tripped yet. After the [onTapHandler] is set to true it won't run again
    if (!timer.isActive && !onTapHandler) {
      onTap();
      onTapHandler = true;
    }

    return Stack(
      children: <Widget>[
        Scaffold(
          appBar: AppBar(title: Text('Fab overlay transition')),
          body: Center(child: Text('This is first page')),
          floatingActionButton: RectGetter(
            key: rectGetterKey,
            child: FloatingActionButton(
              onPressed: onTap,
              child: Icon(Icons.mail_outline),
            ),
          ),
        ),
        _ripple(),
      ],
    );
  }

  Widget _ripple() {
    if (rect == null) {
      return Container();
    }
    return AnimatedPositioned(
      duration: animationDuration,
      left: rect.left,
      right: MediaQuery.of(context).size.width - rect.right,
      top: rect.top,
      bottom: MediaQuery.of(context).size.height - rect.bottom,
      child: Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
        ),
      ),
    );
  }
}

class FadeRouteBuilder<T> extends PageRouteBuilder<T> {
  final Widget page;

  FadeRouteBuilder({@required this.page})
      : super(
          pageBuilder: (context, animation1, animation2) => page,
          transitionsBuilder: (context, animation1, animation2, child) {
            return FadeTransition(opacity: animation1, child: child);
          },
        );
}

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NewPage'),
      ),
    );
  }
}