美文网首页Flutter
Flutter 动画四

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 动画四

        本文链接:https://www.haomeiwen.com/subject/bzdsyqtx.html