如何在Flutter中旋转Lottie动画

rbl8hiat  于 2022-11-30  发布在  Flutter
关注(0)|答案(3)|浏览(230)

我有一个Flutter应用程序,正在显示一些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小部件中 Package Lottie动画(见下文),但那不起作用。添加后,Lottie动画完全消失了。我不太明白Matrix4是如何工作的,关于它的文档很少。我找到了这个Matrix4 explanation,但我仍然不明白它。:-(

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动画,使其看起来像是自身的镜像。因此,这是一个即时的变化,而不是一个过渡动画。
任何帮助都感激不尽。

1u4esq0p

1u4esq0p1#

我以前用过这样的东西来旋转物品...不确定它是否是你所追求的

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

oyxsuwqo2#

结果我差点就成功了!缺少的是alignment。默认值导致旋转超出了可见区域。将对齐方式改为“居中”修复了这一问题:

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

6l7fqoea3#

只需使用RotatedBox Package 您的小工具,并赋予quarterTurns值(0,1,2,3)
假设我的小部件是右箭头的图像:
0无旋转-
1 90度旋转-
2 180度旋转-
3 270旋转-
因此,如果我想让图像面向左侧

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

相关问题