flutter - 在Flutter中实现卡片翻转动画

Question

This is the container flipping from top
我正在尝试卡片翻转动画，但不是从中心翻转。它从容器的顶部翻转。
我正在尝试卡片翻转动画，但不是从中心翻转。它从容器的顶部翻转。

class _Container1State extends State<Container1>
    with SingleTickerProviderStateMixin {
  Animation animation;
  AnimationController animationController;
  @override
  void initState() {
    animationController =
        AnimationController(duration: Duration(seconds: 1), vsync: this);
    animation = Tween(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(curve: Curves.linear, parent: animationController),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    animationController.forward();
    return Scaffold(
        body: AnimatedBuilder(
            animation: animationController,
            builder: (BuildContext context, Widget child) {
              return Center(
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      GestureDetector(
                        onTap: () {
                          animationController.repeat();
                        },
                        child: Container(
                          transform: Matrix4.identity()
                            ..rotateX(2 * 3.14 * animation.value),
                          height: 150,
                          width: 150,
                          color: Colors.yellow,
                          child: Center(child: Text('Text 1')),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }));
  }
}

Answer 1

更新

这是我简单的FlipViewWidget

class FlipView extends StatefulWidget {
  final Widget front, back;

  FlipView({Key key, @required this.front, @required this.back}) : super(key: key);

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

class _FlipViewState extends State<FlipView> with SingleTickerProviderStateMixin {
  Animation _animation;
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(duration: Duration(milliseconds: 400), vsync: this);
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        bool isFront = _controller.value < .5;
        return InkWell(
          onTap: () {
            if (_animation.isDismissed) {
              _controller.forward();
            } else if (_animation.isCompleted) {
              _controller.reverse();
            }
          },
          child: Transform(
            transform: Matrix4.identity()
              ..setEntry(3, 2, 0.002)
              ..rotateX(pi * _animation.value + (isFront ? 0 : pi)),
            alignment: FractionalOffset.center,
            child: isFront ? widget.front : widget.back,
          ),
        );
      },
    );
  }
}

用法

class FlipViewTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          height: 100,
          child: FlipView(
            front: Container(
              color: Colors.red,
              alignment: Alignment.center,
              child: Text('Front', style: TextStyle(fontSize: 25, color: Colors.white)),
            ),
            back: Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: Text('Back', style: TextStyle(fontSize: 25, color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }
}

OLD
设置容器内的变换小部件。而且您可以轻松更改对齐方式。

  @override
  Widget build(BuildContext context) {
    animationController.forward();
    return Scaffold(
      body: AnimatedBuilder(
        animation: animationController,
        builder: (BuildContext context, Widget child) {
          return Center(
            child: Transform(
              transform: Matrix4.identity()
                ..rotateX(2 * 3.14 * animation.value),
              alignment: FractionalOffset.center,
              child: GestureDetector(
                onTap: () {
                  animationController.repeat();
                },
                child: Container(
                  height: 150,
                  width: 150,
                  color: Colors.yellow,
                  child: Center(child: Text('Text 1')),
                ),
              ),
            ),
          );
        },
      ),
    );
  }