使用偏移量的容器动画 - Flutter答案

【问题标题】：Animation Of Container using Offset - Flutter使用偏移量的容器动画 - Flutter
【发布时间】：2019-06-09 04:51:49
【问题描述】：

我正在尝试通过给出开始和结束offset 来移动屏幕上的容器，就像来自Offset(0.0,0.0) to Offset(400.0,300.0) 一样。我正在使用 Slide Transition 为容器设置动画我正在使用 Tween<Offset>(begin: const Offset(3.0, 4.0), end: Offset(0.0, 0.0)) 在屏幕上移动它我想传递这些 Offset(400.0,300.0) 并为其设置动画。

这是我的代码

class MoveContainer extends StatefulWidget {


  MoveContainer({Key key, }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return new _MyMoveContainer();
  }
}

class _MyMoveContainer extends State<MoveContainer>
    with TickerProviderStateMixin {
  GlobalKey _globalKey = new GlobalKey();
  AnimationController _controller;
  Animation<Offset> _offset;
  Offset local;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );
    _offset =
        Tween<Offset>(begin: const Offset(3.0, 4.0), end: Offset(0.0, 0.0))
            .animate(_controller);
    _offset.addListener(() {
      setState(() {});
    });
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offset,
      child: GestureDetector(
        onPanStart: (start) {
          RenderBox getBox = context.findRenderObject();
          local = getBox.localToGlobal(start.globalPosition);
          print('point are $local');
        },
        child: Container(
            color: Colors.cyan,
            height: 200.0,
            width: 200.0,
            child: Text("hello ")),
      ),
    );
  }
}

【问题讨论】：

您的问题/疑问是什么？
@PhucTran 我想将容器从这个Offset(340.0, 410.0) 动画到这个Offset(0.0, 0.0)。
是否需要使用Offset？
是的，因为我必须使用这个功能。看到这个我想要stackoverflow.com/questions/54144121/…
所以用begin: const Offset(340.0, 410.0)替换begin: const Offset(3.0, 4.0)

标签： dart flutter flutter-layout flutter-animation

【解决方案1】：

对于作者来说，这个问题可能并不实际。（7个月前问）。但也许我的回答会对其他人有所帮助。

通常幻灯片过渡用于页面之间的过渡。这就是为什么，这里的一个位置值单位是一页的大小。当你把 Offset(400.0,300.0) 放在那里时，它等于向右 400 屏幕，向下 300 页。

对于您的情况，最好使用 AnimatedPositioned Widget。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: MoveContainer(),
      ),
    );
  }
}

class MoveContainer extends StatefulWidget {
  @override
  _MoveContainerState createState() => _MoveContainerState();
}

class _MoveContainerState extends State<MoveContainer> {
  Offset offset = Offset.zero;
  final double height = 200;
  final double width = 200;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: (details) {
        RenderBox getBox = context.findRenderObject();
        setState(() {
          offset = getBox.localToGlobal(details.globalPosition);
        });
      },
      child: Stack(
        children: <Widget>[
          AnimatedPositioned(
            duration: Duration(milliseconds: 300),
            top: offset.dy - (height / 2),
            left: offset.dx - (width / 2),
            child: Container(
              color: Colors.cyan,
              height: height,
              width: width,
              child: Text("hello "),
            ),
          ),
        ],
      ),
    );
  }
}

【讨论】：