Flutter动画完全指南：隐式/显式动画、Hero过渡、交错动画实现

flutter-animations by madteacher/mad-agents-skills

10,400 周安装量

87 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/madteacher/mad-agents-skills --skill flutter-animations

开发设计

🇨🇳中文介绍

Flutter 动画

概述

根据不同的使用场景，采用合适的方法在 Flutter 中创建流畅、高性能的动画。本技能涵盖完整的动画工作流程：从选择隐式/显式动画方法，到实现复杂的动画效果，如 Hero 过渡动画和交错动画。

动画类型决策树

根据你的需求选择合适的动画类型：

隐式动画 - 适用于：

动画化单个属性（颜色、大小、位置）
动画由状态变化触发
不需要细粒度控制

显式动画 - 适用于：

需要完全控制动画生命周期
同时动画化多个属性
需要对动画状态变化做出反应
创建自定义动画或过渡效果

Hero 动画 - 适用于：

在两个屏幕之间共享一个元素
创建共享元素过渡效果
用户期望元素在路由之间"飞"过去

交错动画 - 适用于：

多个动画需要按顺序或重叠运行
创建涟漪效果或顺序显示效果
按顺序动画化列表项

基于物理的动画 - 适用于：

动画应感觉自然/具有物理特性
类似弹簧的行为、滚动手势
可拖拽的交互

隐式动画

隐式动画在属性变化时自动处理动画。无需控制器。

常见的隐式组件

AnimatedContainer - 动画化多个属性（大小、颜色、装饰、内边距）：

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  width: _expanded ? 200 : 100,
  height: _expanded ? 200 : 100,
  color: _expanded ? Colors.blue : Colors.red,
  child: const FlutterLogo(),
)

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

AnimatedWidget 模式

最适合可复用的动画组件：

class AnimatedLogo extends AnimatedWidget {
  const AnimatedLogo({super.key, required Animation<double> animation})
    : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Center(
      child: Container(
        height: animation.value,
        width: animation.value,
        child: const FlutterLogo(),
      ),
    );
  }
}

AnimatedBuilder 模式

最适合包含动画的复杂组件：

class GrowTransition extends StatelessWidget {
  const GrowTransition({
    required this.child,
    required this.animation,
    super.key,
  });

  final Widget child;
  final Animation<double> animation;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: animation,
        builder: (context, child) {
          return SizedBox(
            height: animation.value,
            width: animation.value,
            child: child,
          );
        },
        child: child,
      ),
    );
  }
}

animation.addStatusListener((status) {
  switch (status) {
    case AnimationStatus.completed:
      _controller.reverse();
      break;
    case AnimationStatus.dismissed:
      _controller.forward();
      break;
    default:
      break;
  }
});

多个同时进行的动画

class AnimatedLogo extends AnimatedWidget {
  const AnimatedLogo({super.key, required Animation<double> animation})
    : super(listenable: animation);

  static final _opacityTween = Tween<double>(begin: 0.1, end: 1);
  static final _sizeTween = Tween<double>(begin: 0, end: 300);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Center(
      child: Opacity(
        opacity: _opacityTween.evaluate(animation),
        child: Container(
          height: _sizeTween.evaluate(animation),
          width: _sizeTween.evaluate(animation),
          child: const FlutterLogo(),
        ),
      ),
    );
  }
}

内置的显式过渡动画

Flutter 提供了开箱即用的过渡动画：

FadeTransition - 淡入淡出动画
ScaleTransition - 缩放动画
SlideTransition - 滑动动画
SizeTransition - 大小动画
RotationTransition - 旋转动画
PositionedTransition - 位置动画（在 Stack 中）

FadeTransition(
  opacity: _animation,
  child: const FlutterLogo(),
)

组件被移除时，释放控制器
使用 AnimatedBuilder 以获得最佳的重建性能
避免在动画监听器中使用 setState()（使用 AnimatedWidget/AnimatedBuilder）
调试时使用 timeDilation 来减慢动画速度

Hero 动画在屏幕之间创建共享元素过渡效果。

Hero(
  tag: 'hero-image',
  child: Image.asset('images/logo.png'),
)

Hero(
  tag: 'hero-image',  // 相同的标签！
  child: Image.asset('images/logo.png'),
)

class PhotoHero extends StatelessWidget {
  const PhotoHero({
    super.key,
    required this.photo,
    this.onTap,
    required this.width,
  });

  final String photo;
  final VoidCallback? onTap;
  final double width;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      child: Hero(
        tag: photo,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onTap,
            child: Image.asset(photo, fit: BoxFit.contain),
          ),
        ),
      ),
    );
  }
}

在屏幕之间导航：

Navigator.of(context).push(
  MaterialPageRoute<void>(
    builder: (context) {
      return Scaffold(
        appBar: AppBar(title: const Text('Detail')),
        body: Center(
          child: PhotoHero(
            photo: 'images/logo.png',
            width: 300.0,
            onTap: () => Navigator.of(context).pop(),
          ),
        ),
      );
    },
  ),
);

在过渡过程中从圆形变换为矩形：

class RadialExpansion extends StatelessWidget {
  const RadialExpansion({
    super.key,
    required this.maxRadius,
    this.child,
  }) : clipRectSize = 2.0 * (maxRadius / math.sqrt2);

  final double maxRadius;
  final double clipRectSize;
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Center(
        child: SizedBox(
          width: clipRectSize,
          height: clipRectSize,
          child: ClipRect(child: child),
        ),
      ),
    );
  }
}

与 MaterialRectCenterArcTween 一起使用，实现基于中心的插值：

static RectTween _createRectTween(Rect? begin, Rect? end) {
  return MaterialRectCenterArcTween(begin: begin, end: end);
}

使用唯一且一致的标签（通常是数据对象本身）
保持路由之间 Hero 组件树的相似性
将图像包裹在具有透明颜色的 Material 中，以获得"弹出"效果
使用 timeDilation 调试过渡效果
需要时考虑使用 HeroMode 来禁用 Hero 动画

以不同的时间安排运行多个动画。

所有动画共享一个控制器：

class StaggerAnimation extends StatelessWidget {
  StaggerAnimation({super.key, required this.controller})
    : opacity = Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(
          parent: controller,
          curve: const Interval(0.0, 0.100, curve: Curves.ease),
        ),
      ),
      width = Tween<double>(begin: 50.0, end: 150.0).animate(
        CurvedAnimation(
          parent: controller,
          curve: const Interval(0.125, 0.250, curve: Curves.ease),
        ),
      );

  final AnimationController controller;
  final Animation<double> opacity;
  final Animation<double> width;

  Widget _buildAnimation(BuildContext context, Widget? child) {
    return Container(
      alignment: Alignment.bottomCenter,
      child: Opacity(
        opacity: opacity.value,
        child: Container(
          width: width.value,
          height: 150,
          color: Colors.blue,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: _buildAnimation,
    );
  }
}

基于区间的时间安排

每个动画都有一个介于 0.0 和 1.0 之间的区间：

animation = Tween<double>(begin: 0, end: 300).animate(
  CurvedAnimation(
    parent: controller,
    curve: const Interval(
      0.25,  // 在控制器持续时间的 25% 时开始
      0.50,  // 在控制器持续时间的 50% 时结束
      curve: Curves.ease,
    ),
  ),
);

常见的补间动画

borderRadius = BorderRadiusTween(
  begin: BorderRadius.circular(4),
  end: BorderRadius.circular(75),
).animate(
  CurvedAnimation(
    parent: controller,
    curve: const Interval(0.375, 0.500, curve: Curves.ease),
  ),
);

class _MenuState extends State<Menu> with SingleTickerProviderStateMixin {
  static const _initialDelayTime = Duration(milliseconds: 50);
  static const _itemSlideTime = Duration(milliseconds: 250);
  static const _staggerTime = Duration(milliseconds: 50);
  static const _buttonDelayTime = Duration(milliseconds: 150);
  static const _buttonTime = Duration(milliseconds: 500);

  final _animationDuration =
      _initialDelayTime +
      (_staggerTime * _menuTitles.length) +
      _buttonDelayTime +
      _buttonTime;

  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: _animationDuration,
      vsync: this,
    );
    _controller.forward();
  }

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

交错动画最佳实践

使用 Interval 来错开动画的时间
确保控制器持续时间覆盖所有区间
在区间内使用曲线实现自然的运动效果
考虑使用 timeDilation 调试时间安排
为菜单项使用递增的延迟，以创建涟漪效果

基于物理的动画

使用物理模拟创建感觉自然的动画。

_controller.fling(
  velocity: 2.0,  // 每秒单位数
);

自定义物理模拟

_controller.animateWith(
  SpringSimulation(
    spring: const SpringDescription(
      mass: 1,
      stiffness: 100,
      damping: 10,
    ),
    start: 0.0,
    end: 1.0,
    velocity: 0.0,
  ),
);

常见的物理模拟

SpringSimulation - 弹簧物理
BouncingScrollSimulation - 带反弹的滚动
ClampingScrollSimulation - 不带反弹的滚动
GravitySimulation - 基于重力的模拟

在组件销毁时释放 AnimationController
在监听器中使用 AnimatedBuilder/AnimatedWidget 而不是 setState()
为自然的运动效果选择合适的曲线
使用 timeDilation 调试动画
考虑性能（避免在动画构建中使用重量级组件）
在各种设备上测试动画
支持反向动画以获得直观的感觉

忘记释放 AnimationController（会导致内存泄漏）
在 AnimatedBuilder 足够的情况下，在动画监听器中使用 setState()
假设动画会立即完成（处理 AnimationStatus）
过度使用动画（动画可能会分散用户注意力）
创建感觉"卡顿"的动画（使用平滑的曲线）
忽略无障碍性（尊重 disableAnimations 偏好设置）

implicit.md - 包含示例和最佳实践的隐式动画组件完整参考。

explicit.md - 深入探讨显式动画、AnimationController 和各种模式。

hero.md - Hero 动画指南，包含标准和径向过渡。

staggered.md - 交错动画模式和时间安排策略。

physics.md - 基于物理的动画和模拟。

curves.md - Curves 类的参考以及如何选择合适的曲线。

常见动画模式的模板代码：

implicit_animation.dart - 隐式动画示例
explicit_animation.dart - 显式动画设置
hero_transition.dart - Hero 动画样板代码
staggered_animation.dart - 交错动画模板

🇺🇸English

Flutter Animations

Overview

Create smooth, performant animations in Flutter using the right approach for each use case. This skill covers complete animation workflow: from choosing between implicit/explicit approaches to implementing complex effects like hero transitions and staggered animations.

Animation Type Decision Tree

Choose the right animation type based on your requirements:

Implicit Animations - Use when:

Animating a single property (color, size, position)
Animation is triggered by state change
No need for fine-grained control

Explicit Animations - Use when:

Need full control over animation lifecycle
Animating multiple properties simultaneously
Need to react to animation state changes
Creating custom animations or transitions

Hero Animations - Use when:

Sharing an element between two screens
Creating shared element transitions
User expects element to "fly" between routes

Staggered Animations - Use when:

Multiple animations should run sequentially or overlap
Creating ripple effects or sequential reveals
Animating list items in sequence

Physics-Based Animations - Use when:

Animations should feel natural/physical
Spring-like behavior, scrolling gestures
Draggable interactions

Implicit Animations

Implicit animations automatically handle the animation when properties change. No controller needed.

Common Implicit Widgets

AnimatedContainer - Animates multiple properties (size, color, decoration, padding):

AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  width: _expanded ? 200 : 100,
  height: _expanded ? 200 : 100,
  color: _expanded ? Colors.blue : Colors.red,
  child: const FlutterLogo(),
)

AnimatedOpacity - Simple fade animation:

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 300),
  child: const Text('Hello'),
)

TweenAnimationBuilder - Custom tween animation without boilerplate:

TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 0, end: 1),
  duration: const Duration(seconds: 1),
  builder: (context, value, child) {
    return Opacity(
      opacity: value,
      child: Transform.scale(
        scale: value,
        child: child,
      ),
    );
  },
  child: const FlutterLogo(),
)

Other implicit widgets:

AnimatedPadding - Padding animation
AnimatedPositioned - Position animation (in Stack)
AnimatedAlign - Alignment animation
AnimatedContainer - Multiple properties
AnimatedSwitcher - Cross-fade between widgets
AnimatedDefaultTextStyle - Text style animation

Best Practices

Prefer implicit animations for simple cases
Use appropriate curves for natural motion (see Curves class)
Set curve and duration for predictable behavior
Use onEnd callback when needed
Avoid nested implicit animations for performance

Explicit Animations

Explicit animations provide full control with AnimationController.

Core Components

AnimationController - Drives the animation:

late AnimationController _controller;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  );
}

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

Tween - Interpolates between begin and end values:

animation = Tween<double>(begin: 0, end: 300).animate(_controller);

CurvedAnimation - Applies a curve to the animation:

animation = CurvedAnimation(
  parent: _controller,
  curve: Curves.easeInOut,
);

AnimatedWidget Pattern

Best for reusable animated widgets:

class AnimatedLogo extends AnimatedWidget {
  const AnimatedLogo({super.key, required Animation<double> animation})
    : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Center(
      child: Container(
        height: animation.value,
        width: animation.value,
        child: const FlutterLogo(),
      ),
    );
  }
}

AnimatedBuilder Pattern

Best for complex widgets with animations:

class GrowTransition extends StatelessWidget {
  const GrowTransition({
    required this.child,
    required this.animation,
    super.key,
  });

  final Widget child;
  final Animation<double> animation;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: animation,
        builder: (context, child) {
          return SizedBox(
            height: animation.value,
            width: animation.value,
            child: child,
          );
        },
        child: child,
      ),
    );
  }
}

Monitoring Animation State

animation.addStatusListener((status) {
  switch (status) {
    case AnimationStatus.completed:
      _controller.reverse();
      break;
    case AnimationStatus.dismissed:
      _controller.forward();
      break;
    default:
      break;
  }
});

Multiple Simultaneous Animations

class AnimatedLogo extends AnimatedWidget {
  const AnimatedLogo({super.key, required Animation<double> animation})
    : super(listenable: animation);

  static final _opacityTween = Tween<double>(begin: 0.1, end: 1);
  static final _sizeTween = Tween<double>(begin: 0, end: 300);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Center(
      child: Opacity(
        opacity: _opacityTween.evaluate(animation),
        child: Container(
          height: _sizeTween.evaluate(animation),
          width: _sizeTween.evaluate(animation),
          child: const FlutterLogo(),
        ),
      ),
    );
  }
}

Built-in Explicit Transitions

Flutter provides ready-to-use transitions:

FadeTransition - Fade animation
ScaleTransition - Scale animation
SlideTransition - Slide animation
SizeTransition - Size animation
RotationTransition - Rotation animation
PositionedTransition - Position animation (in Stack)

Example:

FadeTransition(
  opacity: _animation,
  child: const FlutterLogo(),
)

Performance Tips

Dispose controllers when widget is removed
Use AnimatedBuilder for optimal rebuilds
Avoid setState() in animation listeners (use AnimatedWidget/AnimatedBuilder)
Use timeDilation to slow animations during debugging

Hero Animations

Hero animations create shared element transitions between screens.

Basic Hero Animation

Source screen:

Hero(
  tag: 'hero-image',
  child: Image.asset('images/logo.png'),
)

Destination screen:

Hero(
  tag: 'hero-image',  // Same tag!
  child: Image.asset('images/logo.png'),
)

Complete Example

class PhotoHero extends StatelessWidget {
  const PhotoHero({
    super.key,
    required this.photo,
    this.onTap,
    required this.width,
  });

  final String photo;
  final VoidCallback? onTap;
  final double width;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      child: Hero(
        tag: photo,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onTap,
            child: Image.asset(photo, fit: BoxFit.contain),
          ),
        ),
      ),
    );
  }
}

Navigating between screens:

Navigator.of(context).push(
  MaterialPageRoute<void>(
    builder: (context) {
      return Scaffold(
        appBar: AppBar(title: const Text('Detail')),
        body: Center(
          child: PhotoHero(
            photo: 'images/logo.png',
            width: 300.0,
            onTap: () => Navigator.of(context).pop(),
          ),
        ),
      );
    },
  ),
);

Radial Hero Animation

Transform from circle to rectangle during transition:

class RadialExpansion extends StatelessWidget {
  const RadialExpansion({
    super.key,
    required this.maxRadius,
    this.child,
  }) : clipRectSize = 2.0 * (maxRadius / math.sqrt2);

  final double maxRadius;
  final double clipRectSize;
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Center(
        child: SizedBox(
          width: clipRectSize,
          height: clipRectSize,
          child: ClipRect(child: child),
        ),
      ),
    );
  }
}

Use with MaterialRectCenterArcTween for center-based interpolation:

static RectTween _createRectTween(Rect? begin, Rect? end) {
  return MaterialRectCenterArcTween(begin: begin, end: end);
}

Hero Best Practices

Use unique, consistent tags (often the data object itself)
Keep hero widget trees similar between routes
Wrap images in Material with transparent color for "pop" effect
Use timeDilation to debug transitions
Consider HeroMode to disable hero animations when needed

Staggered Animations

Run multiple animations with different timing.

Basic Staggered Animation

All animations share one controller:

class StaggerAnimation extends StatelessWidget {
  StaggerAnimation({super.key, required this.controller})
    : opacity = Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(
          parent: controller,
          curve: const Interval(0.0, 0.100, curve: Curves.ease),
        ),
      ),
      width = Tween<double>(begin: 50.0, end: 150.0).animate(
        CurvedAnimation(
          parent: controller,
          curve: const Interval(0.125, 0.250, curve: Curves.ease),
        ),
      );

  final AnimationController controller;
  final Animation<double> opacity;
  final Animation<double> width;

  Widget _buildAnimation(BuildContext context, Widget? child) {
    return Container(
      alignment: Alignment.bottomCenter,
      child: Opacity(
        opacity: opacity.value,
        child: Container(
          width: width.value,
          height: 150,
          color: Colors.blue,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: _buildAnimation,
    );
  }
}

Interval-Based Timing

Each animation has an Interval between 0.0 and 1.0:

animation = Tween<double>(begin: 0, end: 300).animate(
  CurvedAnimation(
    parent: controller,
    curve: const Interval(
      0.25,  // Start at 25% of controller duration
      0.50,  // End at 50% of controller duration
      curve: Curves.ease,
    ),
  ),
);

Common Tweens

borderRadius = BorderRadiusTween(
  begin: BorderRadius.circular(4),
  end: BorderRadius.circular(75),
).animate(
  CurvedAnimation(
    parent: controller,
    curve: const Interval(0.375, 0.500, curve: Curves.ease),
  ),
);

Staggered Menu Animation

class _MenuState extends State<Menu> with SingleTickerProviderStateMixin {
  static const _initialDelayTime = Duration(milliseconds: 50);
  static const _itemSlideTime = Duration(milliseconds: 250);
  static const _staggerTime = Duration(milliseconds: 50);
  static const _buttonDelayTime = Duration(milliseconds: 150);
  static const _buttonTime = Duration(milliseconds: 500);

  final _animationDuration =
      _initialDelayTime +
      (_staggerTime * _menuTitles.length) +
      _buttonDelayTime +
      _buttonTime;

  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: _animationDuration,
      vsync: this,
    );
    _controller.forward();
  }

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

Stagger Best Practices

Use Interval to offset animations in time
Ensure controller duration covers all intervals
Use curves for natural motion within intervals
Consider timeDilation to debug timing
Stagger menu items with increasing delay for ripple effect

Physics-Based Animations

Create natural-feeling animations using physics simulations.

Fling Animation

_controller.fling(
  velocity: 2.0,  // Units per second
);

Custom Physics Simulation

_controller.animateWith(
  SpringSimulation(
    spring: const SpringDescription(
      mass: 1,
      stiffness: 100,
      damping: 10,
    ),
    start: 0.0,
    end: 1.0,
    velocity: 0.0,
  ),
);

Common Physics Simulations

SpringSimulation - Spring physics
BouncingScrollSimulation - Scroll with bounce
ClampingScrollSimulation - Scroll without bounce
GravitySimulation - Gravity-based

Best Practices

DO

Dispose AnimationController in widget disposal
Use AnimatedBuilder/AnimatedWidget instead of setState() in listeners
Choose appropriate curves for natural motion
Use timeDilation for debugging animations
Consider performance (avoid heavy widgets in animation builds)
Test animations on various devices
Support reverse animations for intuitive feel

DON'T

Forget to dispose AnimationController (memory leak)
Use setState() in animation listeners when AnimatedBuilder suffices
Assume animation completes instantly (handle AnimationStatus)
Over-animate (animations can distract users)
Create animations that feel "jerky" (use smooth curves)
Ignore accessibility (respect disableAnimations preference)

Resources

references/

implicit.md - Complete reference for implicit animation widgets with examples and best practices.

explicit.md - Deep dive into explicit animations, AnimationController, and patterns.

hero.md - Hero animations guide with standard and radial transitions.

staggered.md - Staggered animation patterns and timing strategies.

physics.md - Physics-based animations and simulations.

curves.md - Reference for Curves class and choosing appropriate curves.

assets/templates/

Template code for common animation patterns:

implicit_animation.dart - Implicit animation examples
explicit_animation.dart - Explicit animation setup
hero_transition.dart - Hero animation boilerplate
staggered_animation.dart - Staggered animation template

Weekly Installs

10.4K

Repository

madteacher/mad-…s-skills

GitHub Stars

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode8.5K

codex8.5K

gemini-cli8.5K

github-copilot8.4K

kimi-cli8.3K

amp8.3K

Flutter动画完全指南：隐式/显式动画、Hero过渡、交错动画实现

🇨🇳中文介绍

Flutter 动画

概述

动画类型决策树

隐式动画

常见的隐式组件

相关 Skills

最佳实践

显式动画

核心组件

AnimatedWidget 模式

AnimatedBuilder 模式

监控动画状态

多个同时进行的动画

内置的显式过渡动画

性能提示

Hero 动画

基础 Hero 动画

完整示例

径向 Hero 动画

Hero 最佳实践

交错动画

基础交错动画

基于区间的时间安排

常见的补间动画

交错菜单动画

交错动画最佳实践

基于物理的动画

投掷动画

自定义物理模拟

常见的物理模拟

最佳实践

应该做的

不应该做的

资源

参考资料/

资源/模板/

🇺🇸English

Flutter Animations

Overview

Animation Type Decision Tree

Implicit Animations

Common Implicit Widgets

Best Practices

Explicit Animations

Core Components

AnimatedWidget Pattern

AnimatedBuilder Pattern

Monitoring Animation State

Multiple Simultaneous Animations

Built-in Explicit Transitions

Performance Tips

Hero Animations

Basic Hero Animation

Complete Example

Radial Hero Animation

Hero Best Practices

Staggered Animations

Basic Staggered Animation

Interval-Based Timing

Common Tweens

Staggered Menu Animation

Stagger Best Practices

Physics-Based Animations

Fling Animation

Custom Physics Simulation

Common Physics Simulations

Best Practices

DO

DON'T

Resources

references/

assets/templates/