Animate container in a curve between 2 offsets

Asked Jan 25 '22 at 14:46

Active Jan 25 '22 at 15:21

Viewed 743 times

I want to animate my widget in a curve between the two offsets. My current code moves them in a straight line.

animation=MyTween(begin: startOffset,end: endOffset).animate(
      CurvedAnimation(
        parent: animationController,
        curve: Curves.easeIn,
      ),);

My widget:-

AnimatedBuilder(
      animation: animation,
      child: Container(height:100,width:100, color: Colors.blue),
      builder: (context,child){
        return Transform.translate(
          offset: animation.value,
          child: child,
        );
      },
    )

My custom tween:-

class MyTween extends Tween<Offset>{
  @override
  Offset lerp(double t) {
    final p = Offset.lerp(begin, end, t)!;
    return Offset(p.dx, p.dy + 100 * sin(2 * pi * t));
  }
}

edited Jan 25 '22 at 15:21

asked Jan 25 '22 at 14:46

Deepak Lohmod

2,072
2
8
18

did you find any difference by changing `curve`? – Md. Yeasin Sheikh Jan 25 '22 at 14:51
@YeasinSheikh they are not meant for moving a widget in a curve path – Deepak Lohmod Jan 25 '22 at 14:56
1

Check out https://stackoverflow.com/questions/60203515/moving-along-a-curved-path-in-flutter – BJW Jan 25 '22 at 14:56
create a custom `Tween` class, something like: `class MyTween extends Tween { ...` and override its `Offset lerp(double t)` method – pskink Jan 25 '22 at 14:58
@pskink could you please override and share the code with some dummy values – Deepak Lohmod Jan 25 '22 at 15:02
it depend on curve, for example: `Offset lerp(double t) {final p = Offset.lerp(begin, end, t)!; return Offset(p.dx, p.dy + 100 * sin(2 * pi * t))}` – pskink Jan 25 '22 at 15:08
@pksink have used custom tween but it shows begin and end is not defined. Check my updated ques – Deepak Lohmod Jan 25 '22 at 15:22

Animate container in a curve between 2 offsets

0 Answers0