在 Flutter 上改变动画的方向答案

【问题标题】：Change the direction of animation on Flutter在 Flutter 上改变动画的方向
【发布时间】：2020-04-29 18:45:48
【问题描述】：

我有一个叫flutter_flip_view的插件。它工作正常，但我想改变动画的方向。我想控制它是从右到左还是从左到右。这是链接flutter_flip_view。有谁知道这是怎么做到的吗？谢谢各位。

【问题讨论】：

【解决方案1】：

您可以使用参数goBackDirection 和goFrontDirection 控制值AxisDirection.right 和AxisDirection.left

代码sn-p

FlipView(
              animationController: _curvedAnimation,
              front: _buildCard('A', () => _flip(true)),
              back: _buildCard('B', () => _flip(false)),
              goBackDirection: AxisDirection.right,
              goFrontDirection: AxisDirection.right,
            )

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_flip_view/flutter_flip_view.dart';

class SimpleExample extends StatefulWidget {
  @override
  _SimpleExampleState createState() => _SimpleExampleState();
}

class _SimpleExampleState extends State<SimpleExample>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _curvedAnimation;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1000));
    _curvedAnimation =
        CurvedAnimation(parent: _animationController, curve: Curves.easeInOut);
  }

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

  void _flip(bool reverse) {
    if (_animationController.isAnimating) return;
    if (reverse) {
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Center(
            child: FlipView(
              animationController: _curvedAnimation,
              front: _buildCard('A', () => _flip(true)),
              back: _buildCard('B', () => _flip(false)),
              goBackDirection: AxisDirection.right,
              goFrontDirection: AxisDirection.right,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildCard(String title, GestureTapCallback onTap) {
    return AspectRatio(
      aspectRatio: 0.7,
      child: Card(
        elevation: 4,
        clipBehavior: Clip.hardEdge,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            gradient: LinearGradient(
              colors: [
                Color(0xff92ffc0),
                Color(0Xff002661),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              splashColor: Colors.white.withOpacity(0.1),
              highlightColor: Colors.transparent,
              borderRadius: BorderRadius.circular(8),
              onTap: onTap,
              child: Center(
                child: Container(
                  width: 48,
                  height: 48,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(60),
                    color: Colors.amber,
                  ),
                  child: Text(
                    title,
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SimpleExample(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

FlipView(
              animationController: _curvedAnimation,
              front: _buildCard('A', () => _flip(true)),
              back: _buildCard('B', () => _flip(false)),
              goBackDirection: AxisDirection.right,
              goFrontDirection: AxisDirection.right,
            )

【讨论】：

请提供更详细的答案，解释为什么您提供的代码对 OP 有帮助。