flutter - 如何沿着从起点到终点的弯曲贝塞尔曲线路径为小部件设置动画？

Question

如何沿着弯曲的贝塞尔曲线路径将小部件位置从一个位置移动到另一个位置？我追求的效果类似于 Hero 动画跨页面转换的工作方式 - 但我只想使用弯曲的贝塞尔曲线路径将小部件从一个位置移动到另一个位置，而不是像 Hero 动画那样跨页面工作。

我知道如何使用 AnimatedPostioned 小部件将小部件从一个位置移动到另一个位置，但我不知道如何执行此操作以便路径是弯曲的/贝塞尔曲线。

Answer 1

其实我刚才问过一个类似的问题:How to add a control point (Bézier curve) between two Offsets?

但现在我们有了 null-safety，所以我修改了那里的代码，并为您做了一个快速演示。

完整源代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHome()));
}

class MyHome extends StatefulWidget {
  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  Offset _end = Offset(300, 300);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Stack(
        children: [
          TweenAnimationBuilder(
            tween: BezierTween(
              begin: Offset(0, 0),
              control: Offset(0, 300),
              end: _end,
            ),
            duration: Duration(seconds: 1),
            builder: (BuildContext context, Offset value, Widget? child) {
              return Positioned(
                left: value.dx,
                top: value.dy,
                child: FlutterLogo(),
              );
            },
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _end = Offset.zero;
          });
        },
      ),
    );
  }
}

class BezierTween extends Tween<Offset> {
  final Offset begin;
  final Offset end;
  final Offset control;

  BezierTween({required this.begin, required this.end, required this.control})
      : super(begin: begin, end: end);

  @override
  Offset lerp(double t) {
    final t1 = 1 - t;
    return begin * t1 * t1 + control * 2 * t1 * t + end * t * t;
  }
}