Search code examples
flutteranimationtransformationlottie

How to rotate Lottie animation in Flutter

I have a Flutter app that is showing some Lottie animations. I sometimes need to flip the animation by 180 degrees on Y axis so that it it is a mirror image of itself.

In C# this is easily achievable by setting animated visual player's plane projection rotationY property to 180 (see below).

  <muxc:AnimatedVisualPlayer x:Name="LottiePlayer">
            <muxc:AnimatedVisualPlayer.Projection>
                <PlaneProjection RotationY="180" x:Name="LottiePayerRotation"/>
            </muxc:AnimatedVisualPlayer.Projection>

In flutter I tried using RotationBox, but that only rotates around X axis. I need to rotate around Y axis (see image below).

rotation planes

I also tried wrapping Lottie animation inside Transform widget (see below), but that doesn't work. After I added that, the Lottie animation completely disappears. I don't quite understand how Matrix4 works, there is very little documentation on it. I found this Matrix4 explanation but I still don't understand it. :-(

Transform(
            transform: Matrix4(
              1,0,0,0,
              0,1,0,0,
              0,0,1,0,
              0,0,0,1,
          )..rotateX(0)..rotateY(180)..rotateZ(0),
            child: Lottie(
              frameRate: FrameRate.max,
              composition: _composition,
              controller: _controller,
            ),
          ),

Note that I do not need the flip to be animated, I just want to flip the Lottie animation instantly so that it looks like a mirror image of itself. So an instant change, not a transition animated.

Any help appreciated.

Solution

  • Turns out I almost had it! What was missing was the alignment. The default value was causing the rotation to get outside the visible area. Changing alignment to "center" fixed that:

    child: Transform(
        alignment: FractionalOffset.center,
        transform: Matrix4(
          1,0,0,0,
          0,1,0,0,
          0,0,1,0,
          0,0,0,1,
        )..rotateY(180),
        child: Lottie(
          frameRate: FrameRate.max,
          composition: _composition,
          controller: _controller,
        ),