如何减慢 Flutter 中的投掷动画？

Question

我正在玩基于 Flutter Gallery 中网格演示的 fling 动画。我制作了下面的示例，但动画播放速度非常快。我几乎看不到它，除非我使用timeDilation. 改变速度的值似乎没有太大的影响。我应该看看别的吗？谢谢！

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;

const kLogoUrl =
    "https://raw.githubusercontent.com/dart-lang/logos/master/logos_and_wordmarks/dart-logo.png";

class LogoWidget extends StatelessWidget {
  // Leave out the height and width so it fills the animating parent
  build(BuildContext context) {
    return new Container(
        margin: new EdgeInsets.symmetric(vertical: 10.0),
        child: new Image.network(kLogoUrl));
  }
}

class TranslateTransition extends StatelessWidget {
  TranslateTransition({this.child, this.animation});

  Widget child;
  Animation<Offset> animation;

  Widget build(BuildContext context) {
    return new AnimatedBuilder(
        animation: animation,
        builder: (BuildContext context, Widget child) {
          return new Center(
            child: new Transform(
              transform: new Matrix4.identity()
                ..translate(animation.value.dx, animation.value.dy),
              child: new Container(
                height: 100.0,
                width: 100.0,
                child: child,
              ),
            ),
          );
        },
        child: child);
  }
}

class LogoApp extends StatefulWidget {
  LogoAppState createState() => new LogoAppState();
}

class LogoAppState extends State<LogoApp> with TickerProviderStateMixin {
  Animation<Offset> _flingAnimation;
  AnimationController _controller;

  initState() {
    super.initState();
    timeDilation = 5.0;

    _controller = new AnimationController(
      vsync: this,
    );

    _flingAnimation = new Tween<Offset>(
      begin: new Offset(-150.0, -150.0),
      end: new Offset(150.0, 150.0),
    )
        .animate(_controller);

    _controller
      ..value = 0.0
      ..fling(velocity: 0.1)
      ..addListener(() {
//        print(_flingAnimation.value);
      });
  }

  Widget build(BuildContext context) {
    return new TranslateTransition(
        child: new LogoWidget(), animation: _flingAnimation);
  }

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

void main() {
  runApp(new LogoApp());
}

Answer 1

fling使用具有默认参数的 SpringSimulation，其中之一是弹簧常数。即使您以零速度开始，弹簧也会以由弹簧常数确定的速度弹起。所以发生的事情是你用一个非常紧的临界阻尼弦从 0.0 到 1.0。

此外，因为您使用的是 NetworkImage，所以您什么也看不到，因为加载图像所需的时间比运行动画所需的时间长。

如果您替换LogoWidget为FlutterLogo，您会看到发生的情况会更好。

如果你想让它变慢，你可以使用animateWith而不是用你自己的自定义参数fling传递一个特定的SpringSimulation参数。

的存在fling有点历史意外。它被设计为主要与AnimationController带有 a 的 s 一起使用，lowerBound并upperBound以像素为单位，而不是超过 0.0...1.0 的默认范围。