Flutter中如何实现动效

在Flutter中实现动效有哪些常用的方法？比如我想实现一个按钮点击后的缩放效果，或者页面切换时的过渡动画，应该使用什么组件或API？官方推荐的动画实现方式是什么？性能优化方面需要注意哪些点？

2 回复

Flutter中实现动效主要通过Animation和AnimationController控制动画属性，结合Tween插值生成中间值。可使用AnimatedWidget或AnimatedBuilder简化代码，内置组件如AnimatedContainer可自动过渡。复杂动效可借助CustomPainter或物理模拟。

更多关于Flutter中如何实现动效的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现动效主要通过以下几种方式：

1. 内置动画组件

AnimatedContainer

自动在属性变化时产生动画效果：

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _selected ? 200.0 : 100.0,
  height: _selected ? 100.0 : 200.0,
  color: _selected ? Colors.red : Colors.blue,
  alignment: _selected ? Alignment.center : AlignmentDirectional.topCenter,
)

AnimatedOpacity

透明度动画：

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 500),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.green,
  ),
)

2. 动画控制器

使用AnimationController实现更复杂的动画：

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn,
    );
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

3. Hero动画

页面间共享元素过渡：

// 第一个页面
Hero(
  tag: 'imageHero',
  child: Image.network('https://example.com/image.jpg'),
)

// 第二个页面
Hero(
  tag: 'imageHero',
  child: Image.network('https://example.com/image.jpg'),
)

4. 隐式动画组件

  • AnimatedPadding - 内边距动画
  • AnimatedPositioned - 位置动画
  • AnimatedAlign - 对齐动画
  • AnimatedDefaultTextStyle - 文本样式动画

选择哪种方式取决于动画复杂度：简单属性变化用隐式动画，复杂交互用AnimationController。

回到顶部