flutter 中的动画详解 全网最全 动画一篇搞定

在Flutter中，动画是用来创建引人入胜的用户界面的关键。Flutter提供了一个强大的动画API，包括AnimationController、CurvedAnimation、Tween和AnimatedBuilder等。

以下是Flutter中动画的详解：

1. AnimationController

AnimationController是一个特殊的Animation对象，主要用于控制动画的开始和结束。它在动画开始到结束时更新其值。

AnimationController controller;
controller = AnimationController(
    duration: const Duration(milliseconds: 2000),
    vsync: this,
  )..addListener(() {
    // 当AnimationController更新其值时，调用此方法
    });

2. CurvedAnimation

CurvedAnimation是一个特殊的Animation对象，它使用不同的曲线来更新其值。

final Animation<double> curve = CurvedAnimation(
    parent: controller,
    curve: Curves.easeIn,
  );

3. Tween

Tween是一个数值插值器，用于在两个值之间插值。

final Animation<double> animation = Tween(begin: 0.0, end: 1.0).animate(curve);

4. AnimatedBuilder

AnimatedBuilder是一个小部件，它在其子部件更新动画值时自动重新构建。

AnimatedBuilder(
    animation: animation,
    builder: (BuildContext context, Widget child) {
      return Container(
        width: animation.value * 200,
        height: animation.value * 200,
        child: child,
      );
    },
    child: FlutterLogo(),
  )

5. StaggeredAnimation

StaggeredAnimation是一种动画效果，它使得一个动画在不同的子元素上有时间上的偏移。

for (int i = 0; i < children.length; i++) {
  final animation = CurvedAnimation(
    parent: controller,
    curve: Interval((i + 1) / children.length, 1.0, curve: Curves.fastOutSlowIn),
  );
  children[i] = AnimatedBuilder(
    animation: animation,
    builder: (BuildContext context, Widget child) {
      return Transform.translate(
        offset: Offset(50.0 * animation.value, 0.0),
        child: child,
      );
    },
    child: children[i],
  );
}

6. Physics

Physics是一种动画效果，它模仿现实世界中的物理规律，例如弹簧、空气阻力等。

import 'package:flutter/physics.dart';
 
final SpringSimulation simulation = SpringSimulation(spring, 0.0, 1.0, 2000.0);

7. CustomAnimation

CustomAnimation是一种动画效果，它可以自定义动画的每一帧。

Animation<double> animation;
animation = Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
  parent: controller,
  curve: Interval(0.0, 0.5, curve: Curves.easeIn),
));
controller.forward();