使用偏移的容器动画-颤振

Question

我试图通过提供offsetfrom 和end的方式（例如from）在屏幕上移动容器Offset(0.0,0.0) to Offset(400.0,300.0)。我正在使用“幻灯片过渡”为容器设置动画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 ")),
      ),
    );
  }
}

Answer 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 "),
            ),
          ),
        ],
      ),
    );
  }
}