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

时间:2019-01-15 07:32:48

标签: dart flutter flutter-layout flutter-animation

我正在尝试通过像offset中那样开始和结束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 ")),
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:0)

这个问题可能不适用于作者。 (要求7个月前)。 但是也许我的回答会帮助别人。

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

对于您而言,最好使用AnimatedPositioned Widget。

enter image description here


    import java.awt.BasicStroke;
    import java.awt.Color;
    import java.awt.Dimension;
    import java.awt.Graphics;
    import java.awt.Graphics2D;
    import java.awt.Point;
    import java.awt.RenderingHints;
    import java.util.List;
    import java.util.Random;
    import java.util.stream.Collectors;
    import java.util.stream.IntStream;

    import javax.swing.JFrame;
    import javax.swing.JPanel;
    import javax.swing.SwingUtilities;

    public class ExampleDrawDemo extends JPanel {

       int        WIDTH  = 600;
       int        HEIGHT = 500;
       JFrame     frame  = new JFrame();
       List<Line> lines;

       public static void main(String[] args) {
          SwingUtilities.invokeLater(() -> new ExampleDrawDemo().start());
       }
       public void start() {
          Random r = new Random();
          Color[] color = {
                Color.RED, Color.BLUE, Color.GREEN, Color.MAGENTA, Color.ORANGE,
                Color.CYAN
          };

          // generate some lines.
          lines = IntStream.range(0, 100).mapToObj(
                i -> new Line(r, color[r.nextInt(color.length)])).collect(
                      Collectors.toList());

          setPreferredSize(new Dimension(600, 500));
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          frame.add(this);
          frame.pack();
          frame.setLocationRelativeTo(null);
          frame.setVisible(true);
       }

       public void paintComponent(Graphics g) {
          super.paintComponent(g);
          Graphics2D g2d = (Graphics2D) g.create();
          // smooth lines
          g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                   RenderingHints.VALUE_ANTIALIAS_ON);
          // line thickness
          g2d.setStroke(new BasicStroke(2));

          for (Line line : lines) {
             g2d.setColor(line.color);
             g2d.drawLine(line.start.x, line.start.y, line.end.x, line.end.y);
          }
          g2d.dispose();
       }

       class Line {
          Point start;
          Point end;
          Color color;

          public Line(Random r, Color color) {
             this.color = color;
             start = new Point(r.nextInt(WIDTH), r.nextInt(HEIGHT));
             end = new Point(r.nextInt(WIDTH), r.nextInt(HEIGHT));
          }
       }
    }