Flutter动画 5 - Flutter内置动画组件

在Flutter中，有许多内置的动画组件可以使用，以下是一些常见的动画组件：

1. AnimatedContainer：用于创建具有动画效果的容器。

AnimatedContainer(
  duration: Duration(seconds: 2),
  curve: Curves.fastOutSlowIn,
  width: animation.value,
  height: animation.value,
  color: Colors.blue,
)

2. AnimatedCrossFade：用于在两个子元素之间执行交叉淡入淡出效果。

AnimatedCrossFade(
  firstChild: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.red,
  ),
  secondChild: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.blue,
  ),
  firstCurve: Curves.easeIn,
  secondCurve: Curves.easeOut,
  duration: Duration(milliseconds: 500),
  crossFadeState: CrossFadeState.showSecond,
)

3. AnimatedList：用于创建动画列表。

AnimatedList(
  key: _listKey,
  initialItemCount: _list.length,
  itemBuilder: (context, index, animation) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(1.0, 0.0),
        end: const Offset(0.0, 0.0),
      ).animate(animation),
      child: Card(
        child: ListTile(
          title: Text('Item ${_list[index]}'),
        ),
      ),
    );
  },
)

4. AnimatedSwitcher：用于在子元素之间执行切换动画。

AnimatedSwitcher(
  duration: Duration(seconds: 2),
  transitionBuilder: (child, animation) {
    return ScaleTransition(
      child: child,
      scale: animation,
    );
  },
  child: _isVisible ? Container(
    key: ValueKey<String>('UniqueKey'),
    color: Colors.blue,
    height: 100.0,
    width: 100.0,
  ) : Container(
    key: ValueKey<String>('UniqueKey'),
    color: Colors.red,
    height: 100.0,
    width: 100.0,
  ),
)

5. FadeInImage：在加载图片时，用淡入效果替换为占位符。

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.png',
  image: 'https://example.com/image.png',
)

6. DefaultTextStyleTransition：用于在文本样式之间执行动画。

DefaultTextStyleTransition(
  style: TextStyle(
    fontSize: animation.value,
  ),
  child: Text('Resizing text'),
)

7. SizeTransition：用于改变组件的大小。

SizeTransition(
  sizeFactor: animation,
  axis: Axis.vertical,
  child: Container(
    color: Colors.blue,
    height: 100.0,
    width: 100.0,
  ),
)