Flutter动画 --- 平移/旋转/缩放/渐变

PS: Flutter中文网提供的动画组件真心太多了，貌似有25种，看着裂开了。。。太多了，用的时候反而不好选择了，感觉只要用自己最熟悉的能实现效果就是最好的。。。
再复杂的动画也是由简单动画组成的，还是熟悉一下4种基本动画效果吧。。。

• 动画核心类简介

在Flutter中Widget动画的核心类有下面这些：
Animation：动画库中的一个核心类，它生成指导动画的值；
CurvedAnimation：将动画过程抽象为一个非线性曲线；
AnimationController：用来管理管理动画，常用的方法有forward()：启动动画；reverse({double from}：倒放动画；reset()：重置动画，将其设置到动画的开始位置；stop({ bool canceled = true })：停止动画。
Tween：AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或不同的数据类型，则可以使用Tween来配置动画以生成不同的范围或数据类型的值。

• 平移动画：SlideTransition

  • 先看下构造方法如下图，必要参数是 Animation<Offset> position

    
    image.png

• 示例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///
/// 平移动画
///
class TransAnimationTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TransAnimationTestState();
}

class TransAnimationTestState extends State<TransAnimationTest>
    with TickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> animation;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              controller.reverse();
            } else if (status == AnimationStatus.dismissed) {
              controller.forward();
            }
          });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    animation = Tween(
            begin: Offset.zero,
            end: Offset((MediaQuery.of(context).size.width - 100) / 100, 1))
        .animate(controller);
    return Scaffold(
      appBar: AppBar(title: Text("平移动画")),
      body: Container(
        child: SlideTransition(
          position: animation,
          child: Container(
            margin: EdgeInsets.fromLTRB(0, 20, 0, 0),
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      ),
    );
  }

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

平移动画.gif

• 旋转动画： RotationTransition

  • 构造函数需要：Animation<double> turns

    
    image.png

  • 示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///
/// 旋转动画
///
class RotateAnimationTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => RotateAnimationTestState();
}

class RotateAnimationTestState extends State<RotateAnimationTest>
    with TickerProviderStateMixin {
  AnimationController controller;
  Animation animation;

  @override
  void initState() {
    super.initState();
    controller =
    AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      });
    animation = Tween<double>(begin: 0, end: 0.5).animate(controller);
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("旋转动画")),
      body: ClipOval(
        child: RotationTransition(
          turns: animation,
          child: Center(
            child: Container(
              width: 100,
              height: 100,
              alignment: Alignment.center,
              color: Colors.red,
              child: Text("旋转起来"),
            ),
          )
        ),
      ),
    );
  }

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

旋转动画.gif

• 缩放动画：ScaleTransition

  • 构造函数必要参数： Animation<double> scale

    
    image.png

  • 示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///
/// 缩放动画
///
class ScaleAnimationTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ScaleAnimationTestState();
}

class ScaleAnimationTestState extends State<ScaleAnimationTest>
    with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              controller.reverse();
            } else if (status == AnimationStatus.dismissed) {
              controller.forward();
            }
          });
    controller.forward();
    animation = Tween<double>(begin: 0.5, end: 1).animate(controller);
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text("缩放动画")),
      body: Container(
        child: ScaleTransition(
          scale: animation,
          child: Center(
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          )
        ),
      ),
    );
  }

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

缩放动画.gif

• 渐变动画：FadeTransition

  • 构造函数必要参数： Animation<double> opacity

    
    image.png

  • 示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///
/// 渐变动画
///
class FadeAnimationTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FadeAnimationTestState();
}

class FadeAnimationTestState extends State<FadeAnimationTest>
    with TickerProviderStateMixin {
  AnimationController controller;
  Animation animation;

  @override
  void initState() {
    super.initState();
    controller =
    AnimationController(duration: Duration(milliseconds: 2000), vsync: this)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      });
    animation = Tween<double>(begin: 0.25, end: 1).animate(controller);
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("渐变动画")),
      body: ClipOval(
        child: FadeTransition(opacity: animation,
          child: Center(
            child: Container(
              width: 100,
              height: 100,
              alignment: Alignment.center,
              color: Colors.red,
            ),
          )
        ),
      ),
    );
  }

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

渐变动画.gif