flutter - 如何减慢 Flutter 中的弹跳动画？

Question

我正在玩基于 Flutter Gallery 中网格演示的 throw 动画。我制作了下面的示例，但动画播放速度非常快。除非我使用 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，其中之一是 Spring 常数。即使您从零速度开始， Spring 也会以 Spring 常数确定的速度弹起。所以发生的事情是，你会从 0.0 到 1.0，使用非常紧的临界阻尼弦。

此外，由于您使用的是 NetworkImage，因此您看不到任何内容，因为加载图像所需的时间比运行动画所需的时间长。

如果您将 LogoWidget 替换为 FlutterLogo，您会更好地看到发生了什么。

如果你想让它运行得更慢，你可以使用 animateWith 而不是 fling 来通过你自己的自定义参数传递一个特定的 SpringSimulation .

fling的存在有点历史的偶然。它的设计主要用于 AnimationControllers，其中 lowerBound 和 upperBound 以像素为单位，而不是超过 0.0...1.0 默认范围.