Question

我试图在2个容器中产生一个简单的徽标动画。这是我需要在具有多个容器的较大项目中实现的简化版本。我使用全局键获取两个容器的位置，然后将它们作为动画小部件的参数传递。我无法使动画正常工作。另一方面，如果我传递了slideTransition文档中的参数，则可以获得动画。请帮我解决问题。我得到的位置是：偏移（107.0，474.0）偏移（107.0，100.0）


import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  final Offset start, end;
  MyStatefulWidget(this.start,this.end);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offsetAnimation;

  @override
  void initState() {
    Offset q = widget.start;
    Offset r = widget.end;
    print(widget.start.toString()+" "+widget.end.toString());
    super.initState();
    _controller = AnimationController(duration: const Duration(seconds: 3), vsync: this);
    _offsetAnimation = Tween<Offset>(begin: Offset.zero, end:Offset(1.7 ,1.2)).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offsetAnimation,
      child: FittedBox(
        fit: BoxFit.scaleDown,
        child: Container(
          height: 20,
          width: 20,
          decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black),
        ),

      ),
    );
  }
}

class OverlayExample extends StatelessWidget {
  GlobalKey _redKey = new GlobalKey();
  GlobalKey _blueKey = new GlobalKey();

  Offset _getPos(GlobalKey key){
    RenderBox renderBox = key.currentContext.findRenderObject();
    return renderBox.localToGlobal(Offset.zero);
  }

  showOverlay(BuildContext context,Offset start, Offset end) async {
    print(start);
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(
      builder: (context) => MyStatefulWidget(start,end),
    );
    overlayState.insert(overlayEntry);

    await Future.delayed(Duration(seconds: 10));

    overlayEntry.remove();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter Animations",
        home: Scaffold(
            appBar: AppBar(title: Text("Flutter Animations")),
            body: Align(
              child: Column(

                mainAxisAlignment: MainAxisAlignment.spaceBetween ,
                children: <Widget>[
                  Container(
                    key : _blueKey,
                    height: 100,
                    width: 200,
                    color: Colors.blue,
                  ),
                  Container(
                    key :_redKey,
                    height: 100,
                    width: 200,
                    color: Colors.red,
                  ),
                  Builder(builder: (context) {
                    return RaisedButton(
                      onPressed: () {
                        showOverlay(context,_getPos(this._redKey),_getPos(this._blueKey));
                      },
                      child: Text("Show Notification", style: TextStyle(color: Colors.white)),
                      color: Colors.orange,
                    );
                  }),
                ],
              ),
            )));
  }
}

void main() => runApp(OverlayExample());```

动画叠加不会出现在抖动中

0 个答案: