如何旋转Lottie动画

Question

我有一个颤抖的应用程序，正在显示一些Lottie动画。有时我需要在y轴上将动画倒180度，以便它是自身的镜像。

在C＃中，可以通过将动画视觉播放器的平面投影rotationy属性设置为180（见下文），很容易实现。

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

在Flutter中，我尝试使用rotationbox，但这仅在X轴周围旋转。我需要围绕y轴旋转（请参见下图）。

我还尝试在transform widget（见下文）中包装Lottie动画，但这不起作用。添加之后，Lottie动画完全消失了。我不太了解matrix4的工作方式，上面几乎没有文档。我发现此

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,
            ),
          ),

请注意，我不需要动画的翻转，我只想立即翻转Lottie动画，以使其看起来像是自身的镜像。因此，即时更改，而不是过渡动画。

任何帮助都可以理解。

Answer 1

我以前曾经使用过这样的东西旋转项目...不确定您是否追求的是

child: Transform.rotate(
              angle: 180 / Math.pi, // Rotations are supplied in radians
               child: Container())

Answer 2

原来我几乎拥有了！缺少的是对齐。默认值导致旋转进入可见区域。更改对齐方式为“中心”修复了：

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,
        ),

Answer 3

只需用rotatedbox＆amp;包装小部件。给出QuarterTurns值（0、1、2、3）

假设我的小部件是右箭头的图像：→

0 否旋转 - > →

1 90旋转 - ↓

2 180旋转 - ←

3 270旋转 - ↑

，如果我希望我的图像面对左侧←：

RotatedBox(
    quarterTurns: 2,
    child: Image.asset('assets/right_arrow.png'),
),

编辑

以 axis 旋转，您需要使用变换窗口小部件。
将转换属性作为matrix4

注意：您必须在readians中给出旋转。

import 'dart:math' as math; 

Transform(
    // to mirror, rotate Y axis
    // math.pi is 180 degree in radian 
    transform: Matrix4.rotationY(math.pi), 
    child: Text('Hello world!'),
),