Question

我正在玩Flutter Gallery中基于网格演示的动画动画。我让下面的例子工作，但动画播放速度非常快。除非我使用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，lowerBound和upperBound以像素为单位，而不是超过0.0 ... 1.0的默认范围。

如何减慢Flutter中的动画片？

1 个答案: