禁用脚手架FAB动画 [英] Disable Scaffold FAB animation

问题描述

默认情况下，在应用运行期间更改FAB时，颤动中的脚手架"会为浮动操作按钮(FAB)设置动画.

By default, the Scaffold in Flutter animates the floating action button (FAB) when changing a FAB while the app is running.

如何禁用此动画?

文档引用了FloatingActionButtonAnimator.scaling动画，该动画可缩放按钮更改时:

The documentation references the FloatingActionButtonAnimator.scaling animation which scales the button when it changes:

///Animator将[floatingActionButton]移动到新 [floatingActionButtonLocation]. //////如果为null，则 [ScaffoldState]将使用默认的动画师， [FloatingActionButtonAnimator.scaling].最终的 FloatingActionButtonAnimator floatActionButtonAnimator;

/// Animator to move the [floatingActionButton] to a new [floatingActionButtonLocation]. /// /// If null, the [ScaffoldState] will use the default animator, [FloatingActionButtonAnimator.scaling]. final FloatingActionButtonAnimator floatingActionButtonAnimator;

但是，没有关于如何完全禁用缩放动画的指示.

However, there is no indication on how to disable the scaling animation completely.

有问题的完整示例代码:

Full example code with the issue:

import 'dart:async';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Timer _timer;
  bool showFirst = true;

  @override
  void initState() {
    _timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
      setState(() {
        showFirst = !showFirst;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButtonLocation: showFirst
          ? FloatingActionButtonLocation.centerDocked
          : FloatingActionButtonLocation.endDocked,
      floatingActionButton: Padding(
        padding: EdgeInsets.only(top: 100.0),
        child: Column(
          children: <Widget>[
            Text('Floating Action Button Title'),
            showFirst
                ? FloatingActionButton.extended(
                    heroTag: 'unique',
                    icon: Icon(Icons.filter_1),
                    label: Text('First FAB'),
                    onPressed: () {},
                  )
                : FloatingActionButton.extended(
                    heroTag: 'unique2',
                    icon: Icon(Icons.filter_2),
                    label: Text('Second FAB'),
                    onPressed: () {},
                  ),
          ],
        ),
      ),
    );
  }

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

向每个FAB添加不同的英雄标签不会影响动画.

Adding a different hero tag to each FAB doesn't affect the animation.

推荐答案

您需要扩展FloatingActionButtonAnimator并覆盖其方法，请检查以下代码，

You need to extend FloatingActionButtonAnimator and override its methods, check the following code,

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Timer _timer;
  bool showFirst = true;

  @override
  void initState() {
    _timer = Timer.periodic(new Duration(seconds: 2), (Timer t) {
      setState(() {
        showFirst = !showFirst;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: showFirst
          ? FloatingActionButtonLocation.centerDocked
          : FloatingActionButtonLocation.endDocked,
      floatingActionButton: Padding(
        padding: EdgeInsets.only(top: 100.0),
        child: Column(
          children: <Widget>[
            Text('Floating Action Button Title'),
            showFirst
                ? FloatingActionButton.extended(
              heroTag: 'unique',
              icon: Icon(Icons.filter_1),
              label: Text('First FAB'),
              onPressed: () {},
            )
                : FloatingActionButton.extended(
              heroTag: 'unique2',
              icon: Icon(Icons.filter_2),
              label: Text('Second FAB'),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }

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

class NoScalingAnimation extends FloatingActionButtonAnimator{
  double _x;
  double _y;
  @override
  Offset getOffset({Offset begin, Offset end, double progress}) {
  _x = begin.dx +(end.dx - begin.dx)*progress ;
  _y = begin.dy +(end.dy - begin.dy)*progress;
    return Offset(_x,_y);
  }

  @override
  Animation<double> getRotationAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }

  @override
  Animation<double> getScaleAnimation({Animation<double> parent}) {
    return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
  }
}

您可以通过更改每种方法返回的值来控制动画的行为.对于前.通过将getOffset方法更改为

You can control the animation behavior by changing what every method returns. for ex. you can make the fab jump from left to right without animation, by changing getOffset method to be

  @override
  Offset getOffset({Offset begin, Offset end, double progress}) {
    if (progress == 1.0){
      return end;
    }else{
      return begin;
    }
  }

这篇关于禁用脚手架FAB动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！