使用偏移的容器动画-颤振 [英] Animation Of Container using Offset - Flutter

问题描述

我试图通过在开始和结束位置 offset 在屏幕上移动容器，例如从 Offset（0.0,0.0）到Offset（400.0） ，300.0）。我正在使用幻灯片过渡为容器设置动画，我正在使用 Tween< Offset>（开始：const Offset（3.0，4.0），end：Offset（0.0，0.0））将其移动到屏幕上，我想通过这些 Offset（400.0,300.0）并对其进行动画处理。

I am trying to move the container on the screen by giving begin and end offset like from Offset(0.0,0.0) to Offset(400.0,300.0). I am using Slide Transition to animate the container I am using Tween<Offset>(begin: const Offset(3.0, 4.0), end: Offset(0.0, 0.0)) to move it on the screen I want to pass these Offset(400.0,300.0) and animate it.

这里是我的代码

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

推荐答案

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

Probably this question is not actual for the author. (Asked 7 months ago). But maybe my answer will help someone else.

通常，幻灯片过渡用于页面之间的过渡。因此，这里的位置值的一个单位就是一页的大小。当您将Offset（400.0,300.0）放到那里时，它等于400个屏幕右下角300个页面。

Usually Slide Transition is used for transitions between pages. That is why, one unit of position value here is the size of one page. When you put there Offset(400.0,300.0) it's equal 400 screen right, and 300 pages down.

对于您来说，最好使用AnimatedPositioned Widget。

For your case it better to use 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 "),
            ),
          ),
        ],
      ),
    );
  }
}

这篇关于使用偏移的容器动画-颤振的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！