如何正确使用SlideTransition？

Question

在Flutter中，我试图将图像（或徽标）从屏幕的中心动画化到屏幕的顶部。

为此，我看了SlideTransition。它有效，但仅用于纵向方向。旋转设备时，图像会超出屏幕。 （也许我不正确地理解Offset属性！）如果我将其用于水平，则肖像输出会更改。

让我向您展示输出：

肖像：

动画之前

动画后（根据需要）

Horizo​​ntal：

动画之前

动画后（（问题在这里）] >>

因此，如您所见，在水平模式下，徽标从屏幕上消失。

这里是代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offsetAnimation;

  @override
  void initState() {
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));

    _offsetAnimation = _controller
        .drive(CurveTween(curve: Curves.easeInOut))
        .drive(Tween<Offset>(begin: Offset(0.0, 0.0), end: Offset(0.0, -1.0)));

    super.initState();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SlideTransition Demo'),
      ),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: SlideTransition(
              position: _offsetAnimation,
              child: FlutterLogo(
                size: 200,
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_controller.status == AnimationStatus.completed) {
            _controller.reverse();
          } else if (_controller.status == AnimationStatus.dismissed) {
            _controller.forward();
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}
任何帮助将不胜感激...

[在Flutter中，我正在尝试从屏幕中央到屏幕顶部制作图像（或徽标）的动画。为此，我看了一下SlideTransition。它有效，但仅用于纵向方向。当...

Answer 1

Answer 2