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

Posted 2023-02-23

【中文标题】使用偏移量的容器动画 - Flutter

【英文标题】：Animation Of Container using Offset - 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？

是的，因为我必须使用这个功能。看到这个我想要***.com/questions/54144121/…

所以用begin: const Offset(340.0, 410.0)替换begin: const Offset(3.0, 4.0)

【参考方案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 "),
            ),
          ),
        ],
      ),
    );