如何在 flutter 中应用平移和旋转动画以创建“卡片被扔来扔去”的效果

Question

我正在创建一个 UNO 游戏应用程序，这是介绍屏幕部分。我需要一种非常自定义的动画，并且我对颤动自定义动画没有太多了解。

这是一个小预览

现在我想创建一个“卡片飞来飞去”的动画。它基本上是卡片（带有 svg 资源的容器）在屏幕上同时平移和旋转，以创建飞行卡片效果。该动画将一遍又一遍地重复。

我已经成功制作了一个非常基本的版本，它只是平移，不旋转，而且看起来不太漂亮。这是代码。

内屏

class IntroScreen extends StatefulWidget {
  @override
  _IntroScreenState createState() => _IntroScreenState();
}

class _IntroScreenState extends State<IntroScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 4));
    _animation = RainbowColorTween([
      CardColors.COLOR1,
      CardColors.COLOR2,
      CardColors.COLOR3,
      CardColors.COLOR4,
      CardColors.COLOR1,
    ]).chain(CurveTween(curve: Curves.easeInOut)).animate(_controller);
    _controller.addListener(() {
      setState(() {});
    });
    _controller.repeat();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          color: _animation.value,
          child: ChangeNotifierProvider<_DataModel>(
            create: (context) => _DataModel(),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                SizedBox(
                  height: 100,
                ),
                _Logo(),
                SizedBox(
                  height: 50,
                ),
                _TextField(),
                _SelectCards(),
                _Play(),
                Expanded(child: FlyingCards(MediaQuery.of(context).size.width)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _Logo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      child: FlareActor(
        "assets/intro_anim.flr",
        alignment: Alignment.center,
        fit: BoxFit.contain,
        animation: 'intro',
      ),
    );
  }
}

这是我设法构建的

class FlyingCards extends StatefulWidget {
  final double width;
  FlyingCards(this.width);
  @override
  _FlyingCardsState createState() => _FlyingCardsState();
}

class _FlyingCardsState extends State<FlyingCards>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 2));

    _animation = Tween<double>(begin: 0, end: widget.width)
        .chain(CurveTween(curve: Curves.ease))
        .animate(_controller)
          ..addListener(() {
            setState(() {});
          })
          ..addStatusListener((status) {
            if (status == AnimationStatus.dismissed)
              _controller.forward();
            else if (status == AnimationStatus.completed) _controller.reverse();
          });

    _controller.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Transform.translate(
        offset: Offset(_animation.value, 0),
        child: Container(
          height: 50,
          width: 50,
          child: SvgPicture.asset('assets/plus4.svg'),
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
        ),
      ),
    );
  }
}

在上图中，卡片实际上在设备的宽度上来回平移。

我觉得我所创造的是一种繁琐的动画制作方式。如果有人还不明白我所说的飞行卡片动画是什么意思，同样的效果出现在愤怒的小鸟游戏屏幕上，只是小鸟和猪在周围飞来飞去。我需要同样的东西，但要带我的卡。

请观看此视频并跳转到 0:22，以获取我所希望的 UI 的一些小参考。

我尝试尽可能地降低复杂性。谢谢你的时间！

Answer 1

这是一个可以扩展的简单示例。“世界你好！” 文本正在平移和旋转。

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

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyAnim(),
        ),
      ),
    );
  }
}

class MyAnim extends StatefulWidget {
  @override
  State<MyAnim> createState() => MyAnimState();
}

class MyAnimState extends State<MyAnim> with SingleTickerProviderStateMixin {
  AnimationController control;

  Animation<double> rot;
  Animation<double> trasl;

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

    control = AnimationController(
      duration: Duration(seconds: 5),
      vsync: this,
    );

    rot = Tween<double>(
      begin: 0,
      end: 2 * pi,
    ).animate(control);

    trasl = Tween<double>(
      begin: 0,
      end: 300,
    ).animate(control);

    control.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: control,
        builder: (_, child) => Stack(children: <Widget>[
              Positioned(
                top: 100,
                left: trasl.value,
                child: Transform(
                  transform: Matrix4.rotationZ(rot.value),
                  alignment: Alignment.center,
                  child: Text('Hello, World!',
                      style: Theme.of(context).textTheme.headline4),
                ),
              ),
            ]));
  }
}