颤动对齐堆栈中的小部件

有时我们需要将小部件放在堆栈中，但是它们可能不太对齐。这时我们可以使用AnimatedAlign来制作一个颤动对齐的动画效果。

步骤

1. 导入需要的包：

import 'package:flutter/material.dart';

2. 定义一个带有状态的小部件：

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.0,
      height: 50.0,
      color: Colors.blue,
    );
  }
}

这是我们要在堆栈中对齐的小部件。

3. 在堆栈中使用AnimatedAlign：

Stack(
  children: [
    AnimatedAlign(
      alignment: Alignment.bottomCenter,
      duration: Duration(milliseconds: 500),
      curve: Curves.easeInOut,
      child: MyWidget(),
    ),
  ],
)

这里我们定义了一个AnimatedAlign的小部件，将它的子控件设置为MyWidget()。alignment属性设置为Alignment.bottomCenter表示要对齐的位置。

4. 添加动画效果：

AnimatedAlign(
  ...
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
  onEnd: () {
    setState(() {});
  },
  child: MyWidget(),
)

我们添加了duration属性，将动画时长设置为500毫秒。curve属性设置了动画的速率。我们还在动画结束时调用setState方法，以便重新绘制小部件。

5. 颤动效果

为了制作颤动效果，我们需要在AnimatedAlign的alignment属性中使用一个Tween对象。我们使用TweenSequence来制作一个逐渐变化的动画效果：

AnimatedAlign(
  alignment: TweenSequence([
    TweenSequenceItem(
      tween: Tween(begin: Alignment.bottomCenter, end: Alignment.bottomCenter),
      weight: 1,
    ),
    TweenSequenceItem(
      tween: Tween(begin: Alignment.bottomCenter, end: Alignment.bottomCenter.translate(20, 0)),
      weight: 1,
    ),
    TweenSequenceItem(
      tween: Tween(begin: Alignment.bottomCenter.translate(20, 0), end: Alignment.bottomCenter.translate(-20, 0)),
      weight: 1,
    ),
    TweenSequenceItem(
      tween: Tween(begin: Alignment.bottomCenter.translate(-20, 0), end: Alignment.bottomCenter),
      weight: 1,
    ),
  ]).animate(animationController),
  duration: Duration(milliseconds: 500),
  onEnd: () {
    setState(() {});
  },
  child: MyWidget(),
)

我们在alignment属性中使用了一个TweenSequence对象，它包含了一个Tween对象数组，它们被放到TweenSequenceItem的weight中。这个数组制作了我们的颤动动画效果。

6. 完整代码

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  late final AnimationController animationController = AnimationController(
    vsync: this,
    duration: Duration(seconds: 1),
  )..repeat();

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        AnimatedAlign(
          alignment: TweenSequence([
            TweenSequenceItem(
              tween: Tween(begin: Alignment.bottomCenter, end: Alignment.bottomCenter),
              weight: 1,
            ),
            TweenSequenceItem(
              tween: Tween(begin: Alignment.bottomCenter, end: Alignment.bottomCenter.translate(20, 0)),
              weight: 1,
            ),
            TweenSequenceItem(
              tween: Tween(begin: Alignment.bottomCenter.translate(20, 0), end: Alignment.bottomCenter.translate(-20, 0)),
              weight: 1,
            ),
            TweenSequenceItem(
              tween: Tween(begin: Alignment.bottomCenter.translate(-20, 0), end: Alignment.bottomCenter),
              weight: 1,
            ),
          ]).animate(animationController),
          duration: Duration(milliseconds: 500),
          onEnd: () {
            setState(() {});
          },
          child: MyWidget(),
        ),
      ],
    );
  }
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyWidget(),
      ),
    );
  }
}

Note： 以上代码仅供参考，您可以根据自己的实际情况做出相应的修改。

效果演示