掌握Flutter动画：让星星闪耀起来

2024-01-23 13:35:50

引言

在移动应用中添加动画元素可以极大地增强用户体验。Flutter为创建流畅、引人注目的动画提供了强大的功能。在本教程中，我们将重点介绍如何使用Flutter动画实现闪烁星星的效果，为你的应用增添一丝星光点点。

方法 1：中心点放大缩小

这种方法通过放大和缩小星星图片来创建闪烁效果。具体步骤如下：

创建一个AnimatedBuilder小部件，它将接受一个AnimationController参数。
在AnimatedBuilder的构建方法中，使用AnimationController来获取动画的当前值。
根据动画值，设置图片的比例变换。
返回变换后的图片小部件。

class BlinkStar extends StatelessWidget {
  final AnimationController animationController;

  BlinkStar({@required this.animationController});

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget child) {
        double scale = animationController.value * 0.2 + 0.8;
        return Transform.scale(scale: scale, child: child);
      },
      child: Image.asset('assets/star.png'),
    );
  }
}

方法 2：改变透明度

此方法通过改变星星图片的透明度来实现闪烁效果。步骤与上一种方法类似：

创建一个AnimatedBuilder小部件，它将接受一个AnimationController参数。
在AnimatedBuilder的构建方法中，使用AnimationController来获取动画的当前值。
根据动画值，设置图片的透明度。
返回图片小部件，其透明度已更新。

class BlinkStarOpacity extends StatelessWidget {
  final AnimationController animationController;

  BlinkStarOpacity({@required this.animationController});

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget child) {
        double opacity = animationController.value;
        return Opacity(opacity: opacity, child: child);
      },
      child: Image.asset('assets/star.png'),
    );
  }
}

实现动画

要实现动画，你需要：

创建一个AnimationController。
在initState()方法中启动AnimationController。
在dispose()方法中处置AnimationController。

class AnimatedStars extends StatefulWidget {
  @override
  _AnimatedStarsState createState() => _AnimatedStarsState();
}

class _AnimatedStarsState extends State<AnimatedStars>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 1000));
    animationController.repeat(reverse: true);
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          BlinkStar(animationController: animationController),
          BlinkStarOpacity(animationController: animationController),
        ],
      ),
    );
  }
}