Flutter開發日記——Flutter動畫SizeTransition詳解

本篇文章已授權微信公衆號 YYGeeker 獨家發佈轉載請標明出處

控件介紹

1. SizeTransition表示一個尺寸動畫，可以通過控制器去控制動畫尺寸值的改變，從而控制動畫的尺寸

構造函數

SizeTransition({
    Key key,
    this.sizeFactor,          //動畫縮放值的變化
    this.axis,                //動畫出現的方式
    this.axisAlignment,       //動畫出現的原始位置偏移量
    Widget child,             //動畫子元素
})

使用方法

1、封裝動畫

我們可以將常用屬性包裝成一個控件

• child：表示由外傳遞進來的元素，由SizeTransition包裹
• sizeFactor：表示由外傳遞進來的動畫屬性值的變化，通過獲取其值，填充到child的尺寸值上
• axis：表示動畫出現的方式，分別是Axis.vertical和Axis.horizontal，垂直方向和橫軸方向
• axisAlignment：表示動畫出現的原始位置偏移量，如果是在垂直方向指的是y，如果是橫軸方向指的是x

class AnimatorTransition extends StatelessWidget {
  final Widget child;
  final Animation<num> animation;
  final Axis axis;

  AnimatorTransition({this.child, this.animation, this.axis = Axis.vertical});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizeTransition(
        //動畫出現的原始位置偏移量
        axisAlignment: 2.0,
        //動畫出現的方式
        axis: axis,
        sizeFactor: animation,
        child: this.child,
      ),
    );
  }
}

2、控制動畫

• 動畫屬性值的變化需要AnimationController來控制
• 通過CurvedAnimation設置其插值器
• 通過Tween設置其值的變化範圍

class WeWidgetState extends State<WeWidget>
    with SingleTickerProviderStateMixin {
    
  Animation<num> _animation;
  AnimationController _controller;
  Animation _curve;

  @override
  void initState() {
    super.initState();

    //動畫控制器
    _controller = AnimationController(
      duration: const Duration(milliseconds: 3000),
      vsync: this,
    );
    //動畫插值器
    _curve = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
    //動畫變化範圍
    _animation = Tween(begin: 0.0, end: 1.0).animate(_curve);
    //啓動動畫
    _controller.forward();
  }
}

3、監聽動畫

• 通過addStatusListener監聽動畫狀態的變化和通過addListener監聽動畫值的變化

class WeWidgetState extends State<WeWidget>
    with SingleTickerProviderStateMixin {
  //嘗試擴展或實現num時，除int或double之外的任何類型都是編譯時錯誤
  Animation<num> _animation;
  AnimationController _controller;
  Animation _curve;

  double _animationValue;
  AnimationStatus _state;

  @override
  void initState() {
    super.initState();

    //動畫控制器
    _controller = AnimationController(
      duration: const Duration(milliseconds: 3000),
      vsync: this,
    );
    //動畫插值器
    _curve = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
    //動畫變化範圍
    _animation = Tween(begin: 0.0, end: 1.0).animate(_curve)
      ..addListener(() {
        setState(() {
          //記錄變化的值
          _animationValue = _animation.value;
        });
      })
      ..addStatusListener((AnimationStatus state) {
        //如果動畫已完成，就反轉動畫
        if (state == AnimationStatus.completed) {
          _controller.reverse();
        } else if (state == AnimationStatus.dismissed) {
        //如果動畫已經消失，則開始動畫
          _controller.forward();
        }

        setState(() {
          _state = state;
        });
      });
    //啓動動畫
    _controller.forward();
  }
}

效果圖

源代碼

import 'package:flutter/material.dart';

class Day16 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      home: WeWidget(),
    );
  }
}

class WeWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return WeWidgetState();
  }
}

class WeWidgetState extends State<WeWidget>
    with SingleTickerProviderStateMixin {
  //嘗試擴展或實現num時，除int或double之外的任何類型都是編譯時錯誤
  Animation<num> _animation;
  AnimationController _controller;
  Animation _curve;

  double _animationValue;
  AnimationStatus _state;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(milliseconds: 3000),
      vsync: this,
    );
    _curve = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
    _animation = Tween(begin: 0.0, end: 1.0).animate(_curve)
      ..addListener(() {
        setState(() {
          _animationValue = _animation.value;
        });
      })
      ..addStatusListener((AnimationStatus state) {
        if (state == AnimationStatus.completed) {
          _controller.reverse();
        } else if (state == AnimationStatus.dismissed) {
          _controller.forward();
        }

        setState(() {
          _state = state;
        });
      });
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("day15"),
      ),
      body: _buildColumn(),
    );
  }

  Widget _buildColumn() {
    return Column(
      children: <Widget>[
        Text("動畫類型：Axis.vertical"),
        AnimatorTransition(
          child: FlutterLogo(
            style: FlutterLogoStyle.horizontal,
            size: 200,
          ),
          animation: _animation,
          axis: Axis.vertical,
        ),
        Text("動畫類型：Axis.horizontal"),
        AnimatorTransition(
          child: FlutterLogo(
            style: FlutterLogoStyle.horizontal,
            size: 200,
          ),
          animation: _animation,
          axis: Axis.horizontal,
        ),
        Text("動畫值：" + _animationValue.toString()),
        Text("動畫狀態：" + _state.toString()),
      ],
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

class AnimatorTransition extends StatelessWidget {
  final Widget child;
  final Animation<num> animation;
  final Axis axis;

  AnimatorTransition({this.child, this.animation, this.axis = Axis.vertical});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizeTransition(
        //動畫出現的原始位置偏移量
        axisAlignment: 2.0,
        //動畫出現的方式
        axis: axis,
        sizeFactor: animation,
        child: this.child,
      ),
    );
  }
}