如何在两个偏移之间添加控制点（贝塞尔曲线）？

Question

I'm trying to animate a picture sliding on the screen. So far I'm using a Tween<Offset> to lerp between two offsets: Tween(begin: startOffset, end: destOffset) . This animates the picture sliding in a straight line.

Is there an easy way to add a control point to form a Bézier curve? I see there's quadraticBezierTo in Path class, but I don't know how to transform between an Offset (or a Point ) class to a Path class. Another way is to create my own Tween that calculates a Bézier curve instead of just doing lerp , but I thought I'd ask before reinventing the wheel.

Answer 1

It's not difficult to write a BezierTween that calculates a Bezier curve with a control point:

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

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

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

To use it, change:

Tween(begin: startOffset, end: destOffset from the question, to:

BezierTween(begin: startOffset, end: destOffset, control: controlOffset)

However I'm still wondering if this kind of use case is already built into the awesome Flutter framework.