Flutter 动画四

作者: 过期的薯条 | 来源:发表于2019-03-01 17:47 被阅读24次

1.引言

上一节学习了Tab切换,虽然官网上都有，但是还是自己撸一遍为好。这节内容把flutter的动画都写一遍。

2.正题

2.1 AnimatedCrossFade

AnimatedCrossFade让俩个子widget 交替淡入淡出。

class AnimatedCrossFade1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new AnimatedCrossFade2();
  }
}

class AnimatedCrossFade2 extends State<AnimatedCrossFade1> {
  var _first = false;

  @override
  Widget build(BuildContext context) {
    new Timer(new Duration(seconds: 3), () {
      setState(() {
        _first = !_first;
      });
    });
    return AnimatedCrossFade(
      duration: const Duration(seconds: 3),
      firstChild:
          const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
      secondChild:
          const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
      crossFadeState:
          _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
    );
  }
}

2.2 AnimatedBuilder

AnimatedBuilder构建动画最常用的控件。AnimatedBuilder 由 animation,child,builder 三个参数。

class AnimatedBuilder1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new AnimatedBuilder2();
  }
}
class AnimatedBuilder2 extends State<AnimatedBuilder1>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    var controller =
        AnimationController(duration: Duration(seconds: 3), vsync: this)
          ..forward();

    return new AnimatedBuilder(
        animation: controller,
        child: Container(width: 200.0, height: 200.0, color: Colors.green),
        builder: (BuildContext context, Widget child) {
          print(controller.value);
          return Transform.scale(
            scale: controller.value,
            child: child,
          );
        });
  }
}

当创建一个AnimationController时，需要传递一个vsync参数，存在vsync时会防止屏幕外动画（译者语：动画的UI不在当前屏幕时）消耗不必要的资源。通过将SingleTickerProviderStateMixin添加到类定义中，可以将stateful对象作为vsync的值。你可以在GitHub的animate1中看到这个例子。

2.3 DecoratedBoxTransition

DecoratedBoxTransition 装饰widget边界的动画。核心是Animation<Decoration>对象和Child。Animation<Decoration>通过DecorationTween.animate(controller) 得到。

属性：position 代表绘制边框是在widget前还是后。

demo如下：

class DecoratedBoxTransition1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new DecoratedBoxTransition2();
  }
}

class DecoratedBoxTransition2 extends State<DecoratedBoxTransition1>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    DecorationTween decorationTween = DecorationTween(
      begin: BoxDecoration(
        color: Colors.blue,//子widget背景颜色
        border: Border.all(
          color: Colors.blue,//边界颜色
          style: BorderStyle.solid,
          width: 1.0,
        ),
        borderRadius: BorderRadius.all(Radius.circular(20)),
        shape: BoxShape.rectangle,
        boxShadow: const <BoxShadow>[
          BoxShadow(
            color: Colors.amberAccent,
            blurRadius: 5.0,
            spreadRadius: 5.0,
          )
        ],
      ),
      end: BoxDecoration(
        color: Colors.green,
        border: Border.all(
          color: Colors.green,
          style: BorderStyle.solid,
          width: 1.0,
        ),
        shape: BoxShape.rectangle,
        boxShadow: const <BoxShadow>[
          BoxShadow(
            color: Colors.blueGrey,
            blurRadius: 5.0,
            spreadRadius: 5.0,
          )
        ],
        borderRadius: BorderRadius.all(Radius.circular(30)),
      ),
    );
    var controller =
        AnimationController(duration: Duration(seconds: 3), vsync: this)
          ..forward();
    Animation<Decoration> d = decorationTween.animate(controller);
    return new DecoratedBoxTransition(
        decoration: d,
        position: DecorationPosition.background,
        child: new Container(
          width: 200,
          height: 200,
        ));
  }
}

ps: DecoratedBoxTransition 的child 背景色最好是无色的。不然会影响效果

2.3 FadeTransition 淡入淡出动画

FadeTransition 淡入淡出动画。opacity 属性需要指定一个Animation<double>，child属性指定widget。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: new FadeTransition(
          opacity: new AnimationController(
            duration: Duration(seconds: 3),
            vsync: this,
          )..repeat(),
          child: FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
          alwaysIncludeSemantics: true,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

2.4 PositionedTransition 定位动画

PositionedTransition动画很麻烦，主要由俩个重要的属性：

rect
规定子widget 离 Stack边距的值。由RelativeRectTween.animate(AnimationController)获得。
child
顾名思义将被施加动画的widget

ps：PositionedTransition 必须作为Stack 控件的子View，否则就会报错。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  @override
  Widget build(BuildContext context) {

    Animatable animatable= RelativeRectTween(begin: new RelativeRect.fromLTRB(75.0, 75, 75, 75.0),
    end: new RelativeRect.fromLTRB(100.0, 100.0, 100.0, 100.0),
);
    Animation frontRelativeRect = animatable.animate(new AnimationController(
      duration: Duration(seconds: 3),
      vsync: this,
    )..repeat());

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
       alignment: Alignment.center,
       fit: StackFit.loose,
        children: <Widget>[
      
         Container(
          width: 200,
          height: 200,
          color: Colors.blue),
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),

          PositionedTransition(
          rect: frontRelativeRect,
          child:        Container(
          width: 50,
          height: 50,
          color: Colors.orange,
        ) ,
        )
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Stack 控件

Stack层叠控件。其childWidget 可以层叠到一起，层叠顺序：Widget越后创建，层级越靠上
可以控制没有定位的childWidget的布局策略。
可以控制没有定位的childWidget的布局策略

Stack({
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})

alignment
决定如何去对齐没有定位（没有使用Positioned）或部分定位的子widget。所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位
textDirection
和Row、Wrap的textDirection功能一样，都用于决定alignment对齐的参考系即：textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右；textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左。
fit
此参数用于决定没有定位的子widget如何去适应Stack的大小。StackFit.loose表示使用子widget的大小，StackFit.expand表示扩伸到Stack的大小。
overflow
此属性决定如何显示超出Stack显示空间的子widget，值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。

2.5 RotationTransition 旋转动画

旋转动画RotationTransition。核心属性child和turns。

class RotationTransitionState extends State<RotationTransition1> with SingleTickerProviderStateMixin  {
  @override
  Widget build(BuildContext context) {
    return new RotationTransition(
      child: Container(
        width: 100,
        height: 100,
        color: Colors.orange,
      ),
      turns: AnimationController(
        duration: Duration(seconds: 1),
        vsync: this,
        lowerBound: 0,
        upperBound: 0.1,
      )..forward(),
    );
  }
}

2.6 ScaleTransition缩放动画

ScaleTransition 核心属性child 和scale。scale类型是Animation<double>。Animation<double>可以根据Tween.animate 生成。
demo：是由1缩小到0

class ScaleTransitionState extends State<ScaleTransition1>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    Animation<double> t =
        Tween(begin: 1.0, end: 0.0).animate(AnimationController(
      duration: Duration(seconds: 3),
      vsync: this,
    )..forward());

    return new ScaleTransition(
      child: Container(
        width: 100,
        height: 100,
        color: Colors.orange,
      ),
      scale: t,
    );
  }
}

2.6 SlideTransition移动动画

SlideTransition 动画最重要的属性是position和child。position是Animation<Offset>。可以通过Tween.animate 生成。

class SlideTransition1State extends State<SlideTransition1>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    var t = Tween<Offset>(
      begin: const Offset(0.0, 2.0),
      end: const Offset(0.0, 1.0),
    ).animate(AnimationController(
      duration: Duration(seconds: 3),
      vsync: this,
    )..forward());

    return new SlideTransition(
      child: Container(
        width: 100,
        height: 100,
        color: Colors.orange,
      ),
      position: t,
    );
  }
}

begin: const Offset(0.0, 2.0)表示的意思是：动画刚开始child的x轴的起点不变，y轴起点是(1+2)* y。ps:y是child的高度值
end: const Offset(0.0, 1.0) 表示的意思是:动画结束后，x轴坐标不变，y轴坐标是(1+1)* y

Flutter 动画四

1.引言

2.正题

2.1 AnimatedCrossFade

2.2 AnimatedBuilder

2.3 DecoratedBoxTransition

2.3 FadeTransition 淡入淡出动画

2.4 PositionedTransition 定位动画

ps：PositionedTransition 必须作为Stack 控件的子View，否则就会报错。

Stack 控件

2.5 RotationTransition 旋转动画

2.6 ScaleTransition缩放动画

2.6 SlideTransition移动动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter