Flutter动画(全)

Flutter动画

1.Flutter Api自带的动画部件。

2.自定义动画。

3.结合自定义手势和自定义绘制来搞出各种炫酷的需求。

一 Flutter Api提供了用户足够操作的动画部件。我们可以通过这些部件来达到几乎所有的动画效果。常见的动画部件有一下:

(1)AnimatedContainer	(2)AnimatedCrossFade	(3)Hero	(4)AnimatedBuilder
(5)DecoratedBoxTransition	(6)FadeTransition	(7)RelativePositionedTransition	(8)RotationTransition
(9)ScaleTransition	(10)AlignTransition	(11)SizeTransition	(12)SlideTransition
(13)AnimatedDefaultTextStyle	(14)AnimatedListState	(15)AnimatedModalBarrier	(16)AnimatedOpacity
(17)AnimatedPhysicalModel	(18)AnimatedPositioned	(19)AnimatedSize	AnimatedWidget
(20)AnimatedWidgetBaseState

接下来我们一一去写代码,将每一个动画部件挥到不错的效果。

1.第一个动画部件AnimatedContainer其实可以实现各种弹出飞出和推出(margin,padding),收缩效果(width,height)。我们看效果图

 AnimatedContainer({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
    Curve curve = Curves.linear,
    @required Duration duration,
    Duration reverseDuration,
  })

我们通过上图可以看到有容器直接从上到下掉下来的。也有左边折叠收缩效果的。现在有一个问题我们AnimatedContainer内部包裹大小确定的容器,为嘛收起来时候内容不会超出报错。我们查看内部源码可以知道其实将其子部件的每一个边距大小属性都通过动画,达到和整体的缩放动画比例一致。这样就不会有超出边界异常。我们通过margin等可以实现上啦下拉效果。通过宽高可以实现收缩效果。

看源码一角:
  @override
  Widget build(BuildContext context) {
    return Container(
      child: widget.child,
      alignment: _alignment?.evaluate(animation),
      padding: _padding?.evaluate(animation),
      decoration: _decoration?.evaluate(animation),
      foregroundDecoration: _foregroundDecoration?.evaluate(animation),
      constraints: _constraints?.evaluate(animation),
      margin: _margin?.evaluate(animation),
      transform: _transform?.evaluate(animation),
    );
  }

相关效果页面 AnimalContainer github使用地址

1.第2个动画部件AnimatedCrossFade其实可以实现两种部件之间的过渡变化。我们看效果图

 const AnimatedCrossFade({
    Key key,
    @required this.firstChild,
    @required this.secondChild,
    this.firstCurve = Curves.linear,
    this.secondCurve = Curves.linear,
    this.sizeCurve = Curves.linear,
    this.alignment = Alignment.topCenter,
    @required this.crossFadeState,
    @required this.duration,
    this.reverseDuration,
    this.layoutBuilder = defaultLayoutBuilder,
  }) 

通过使用和源码我们发现可以通过这个部件让其部件进行变化。在上面我现实的动图中将一个圆形按钮变到一个大界面我貌似见过很多的此类效果。

相关效果页面 AnimatedCrossFade使用地址