0

如何使动画居中成为可能?我正在使用https://pub.dev/packages/simple_animations包。

我有一个带有多个定位小部件的堆栈,其中动画作为子级。问题是动画不是从中心动画而是从左上角动画。这是只有一个位于堆栈内的代码。

有谁知道如何让动画从中心开始?

谢谢

Stack(children: [
Positioned(
  right: 15.0,
  top: 10.0,
  child: AnimRectangle(),
)],);


enum AniProps { width, height, color }

class AnimRectangle extends StatelessWidget {

  final tween = MultiTween<AniProps>()
    ..add(AniProps.width, 0.0.tweenTo(40.0), 1000.milliseconds)
    ..add(AniProps.width, 40.0.tweenTo(5.0), 500.milliseconds)
    ..add(AniProps.height, 0.0.tweenTo(50.0), 2500.milliseconds)
    ..add(AniProps.color, Colors.red.tweenTo(Colors.blue), 3.seconds);

  @override
  Widget build(BuildContext context) {
    return PlayAnimation<MultiTweenValues<AniProps>>(
            tween: tween, // Pass in tween
            duration: tween.duration, // Obtain duration from MultiTween
            builder: (context, child, value) {
              return Container(
                width: value.get(AniProps.width), 
                height: value.get(AniProps.height),
                color: value.get(AniProps.color),
              );
            },
    );
  }
}
4

2 回答 2

0

您可以简单地使用中alignment存在的选项Stack

child: Stack(
  alignment: Alignment.center,
  children: <Widget>[

  ],
),
于 2020-11-13T18:05:46.050 回答
0

我解决了在定位小部件中放置一个 SizedBox 的问题!

Stack(children: [
Positioned(
  right: 15.0,
  top: 10.0,
  child:SizedBox(
    height: 60,
    width: 60,
  child: AnimRectangle(),
  ),
)],);
于 2020-11-13T18:01:34.593 回答