动画 on 首页 | Widegram

Flutter动画全解（三）底层自定义动画——Hero、CustomPainter和Rive

Mon, 01 Nov 2021 20:40:45 +0000

底层自定义动画

3.1 Flutter动画原理

Flutter内部通过setState()函数刷新页面，且flutter优化得相当好，一秒执行60/120次也不会有卡顿。

Ticker原理：屏幕每刷新一帧，称为一个ticker：

Ticker _ticker = Ticker((elapsed) {
  print("Tick: $elapsed");	//elapsed是运行总时长
})..start();

你可以通过下列方式手动制作一个Ticker（仅作为实验用途，不推荐）：

double _height = 300;
@override
void initState(){
  Ticker _ticker = Ticker((_) => setState((){
    _height --;
    if(_height <= 0) _height = 300;
  }))..start();
  super.initState();
}

上述程序虽然可以运行，但首先，它没有考虑一些特殊情况，如程序暂时退出、切换到其他程序时，动画应该暂停。其次，每一帧时_height--，则在60帧的屏幕下该动画需要5秒执行完毕，而在120hz屏幕下只需要2.5秒。

3.2 Hero动画（主动画）

将需要做Hero动画的控件包裹上Hero，并给它一个tag属性，两个页面对应控件的tag一致。

如果两个页面中的控件样式不一致，或者类型不统一，那么会瞬间切换，不会有控件切换时的动画效果。

3.3 CustomPaint

Tips：要使Container占满屏幕，使用

Container(
	constraints: BoxConstraints.expand(),
  //或者
  width: double.infinity,
  height: double.infinity,
)

3.4 嵌入式Rive（Flare）插件动画

Rive New File

Flutter动画全解（二）显式动画——Transition系列

Mon, 01 Nov 2021 20:33:45 +0000

显式动画——Transition系列（配合AnimationController）

2.1 循环旋转——RotationTransition

我们需要使用RotationTransition配合AnimationController实现动画的手动控制，以实现隐式动画（Animated系列）无法完成的功能：循环重播、随时中断、多方协调等。

另外，要使用AnimationController，我们必须使用StatefulWidget，以使用生命周期函数initState()和dispose()。

我们先简单地看一个实例，在后文中，我们将详细解释其中的内容。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}

//SingleTickerProviderStateMixin用于垂直同步
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool _loading = false;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose(); //用完删除，否则内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: Container(
        width: 300,
        height: 120,
        color: Colors.blue,
        child: RotationTransition(
          turns: _controller,   //这里直接使用controller即可，后文来解释
          //这里的动画还没有开始，调用_controller.forward()开始
          child: const Icon(Icons.repeat,size: 100),
        ),
      )),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {		//按一下按钮开始旋转，再按一下停止。
          _loading ? _controller.stop() : _controller.repeat();
          _loading = !_loading;
        },
      ),
    ));
  }
}

完成效果如下：

2.2 AnimationController是什么

class AnimationController extends Animation<double>

从本质上来说，AnimationController是一个Animation，正如上面看到的那样，RotationTransition的turns属性本质上要求一个Animation。

AnimationController会在Duration时间内，生成0～1的double，如果要更改区间，使用lowerBound和upperBound属性。

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

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

//SingleTickerProviderStateMixin用于垂直同步，屏幕每次刷新，产生一个tick
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {

  /* class AnimationController extends Animation */
  late AnimationController _controller;
  bool _loading = false;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      lowerBound: 0.0, //与默认一致，生成0-1
      upperBound: 1.0,
      vsync: this,
    )..addListener(() { //dart语法：“..”表示返回值还是前面的表达式
      // _controller.value 在1s内自动生成0～1之间的数字（1秒60帧）
      print("${_controller.value}");
    });

    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose(); //用完删除，否则内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: Container(
        width: 300,
        height: 120,
        color: Colors.blue,
        //例如：RotateTransition、FadeTransition、ScaleTransition
        child: FadeTransition(
          opacity: _controller, //这里本质上要求一个Animation
          child: const Icon(Icons.repeat, size: 100),
        ),
      )),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          _loading ? _controller.stop() : _controller.repeat(reverse: true);
          _loading = !_loading;
        },
      ),
    ));
  }
}

2.3 控制器补间（Tween）和曲线

我们可以使用drive函数将Animation的值映射到Tween上，也就是说，最终生成的值是在0.5到1.0之间，而不是原来的0.0～1.0了。

ScaleTransition(
  scale: _controller.drive(Tween(begin: 0.5, end: 1.0)),
  ...
),

又比如说，

SlideTransition(
  position: _controller.drive(Tween(begin: Offset.zero, end: const Offset(0.1,0))),
  ...
),

//等价于
SlideTransition(
  position: Tween(begin: Offset.zero, end: const Offset(0.1,0)).animate(_controller),
  ...
),

通过使用chain函数，Tween之间可以叠加，比如，

SlideTransition(
  position: Tween(begin: Offset.zero, end: const Offset(0,1.0))
      .chain(CurveTween(curve: Curves.elasticOut))  //叠加曲线
      .chain(CurveTween(curve: const Interval(0.5, 1.0))) 
      //使用Interval，限制动画播放时间，从 50% 时间开始到 100% ，其他时间不做任何事
      .animate(_controller),
  ...
),

整体代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late bool _stop = false;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..repeat();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: SlideTransition(
              position: Tween(begin: Offset.zero, end: const Offset(0,1.0))
                .chain(CurveTween(curve: Curves.elasticOut))  //叠加曲线
                .chain(CurveTween(curve: const Interval(0.5, 1.0))) 
                      //使用Interval，限制动画播放时间，从 50% 时间开始到 100% ，其他时间不做任何事
                .animate(_controller),
              child: Container(
                width: 300,
                height: 120,
                color: Colors.blue,
              ))),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          _stop ? _controller.repeat() : _controller.reset();
          _stop = !_stop;
        },
      ),
    ));
  }
}

2.4 交错动画——Interval

如上文，使用Interval可以限制播放时间，如此一来，作如下安排，达到五个组件间到交错动画：

时间0.0～0.2运行第一个动画
时间0.2～0.4运行第二个动画
时间0.4～0.6运行第三个动画
时间0.6～0.8运行第四个动画
时间0.8～1.0运行第五个动画

使用Column控件将以上五个SlideTransition组织起来，并将它们绑定到同一个_controller即可（SlideTransition本身也是Widget）：
```
class SlideTransition extends AnimatedWidget { ... }
```

2.5 自定义动画——AnimatedBuilder

通过自己动手制作FadeTransition，我们可以看出Transition系列控件的内部原理。同时也可以看到，就像TweenAnimationBuilder那样，使用AnimatedBuilder时我们也可以对动画进行优化，避免反复渲染那些与动画无关的Widget：

//如何使用AnimatedBuilder制作出一个FadeTransition？
child: AnimatedBuilder(
  //每当animtion（_controller）的值变化，flutter就会重新调用builder函数
  animation: _controller, 
  //还记得builder就是复杂版的child吗？
  builder: (context, child) {
    return Opacity(
      opacity: _controller.value,//这里可以用Tween制作补间动画
      child: child
    );
  },
  //下面的child是用于优化
  child: const Icon(Icons.repeat, size: 100)
),

//这是内置的FadeTransition，使用起来更加简单，但是没有办法进行细致的绘制优化
child: FadeTransition(
  opacity: _controller, //这里本质上要求一个Animation
  child: const Icon(Icons.repeat, size: 100),
),

整体代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    final Animation opacityAnimation = Tween(begin: 0.5, end: 0.8).animate(_controller);
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: Container(
              width: 300,
              height: 300,
              color: Colors.red,
              child: AnimatedBuilder(
                  animation: _controller, //每当animtion（_controller）的值变化，flutter就会重新调用builder函数
                  builder: (context, child) { //还记得builder就是复杂版的child吗？
                    return Opacity(
                      opacity: opacityAnimation.value,
                      //使用Tween制作补间
                      //需要注意的是这里的opacity是普通变量，所以需要使用Animation.value
                      child: child
                    );
                  },
                  //下面的child是用于优化
                  child: const Icon(Icons.repeat, size: 100)
              ))),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
    ));
  }
}

2.6 使用多个Controller的例子——TickerProviderStateMixin

有时我们会希望使用多个Controller（绝大多数情况下一个足矣），此时我们需要使用TickerProviderStateMixin。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late AnimationController _expansionController;
  late AnimationController _opacityController;

  @override
  void initState() {
    _expansionController = AnimationController(vsync: this);
    _opacityController = AnimationController(vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _expansionController.dispose();
    _opacityController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Animation gradientAnimation =
        Tween(begin: 0.3, end: 1.0).animate(_expansionController);
    return MaterialApp(
        home: Scaffold(
      body: Center(
          child: FadeTransition(
              opacity: _opacityController.drive(Tween(begin: 1.0, end: 0.5)),
              child: AnimatedBuilder(
                animation: _expansionController,
                builder: (context, child) => Container(
                  width: 200,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white,
                    gradient: RadialGradient(colors: [
                      Colors.blue.shade500,
                      Colors.grey.shade50
                    ], stops: [
                      gradientAnimation.value,
                      gradientAnimation.value + 0.2
                    ]),
                  ),
                ),
              ))),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.badge),
        onPressed: () async {
          _expansionController.duration = const Duration(seconds: 3);
          _expansionController.forward();
          await Future.delayed(const Duration(seconds: 3));
          _opacityController.duration = const Duration(seconds: 4);
          _opacityController.forward();
          await Future.delayed(const Duration(seconds: 4));
          _expansionController.duration = const Duration(seconds: 1);
          _expansionController.reverse();
        },
      ),
    ));
  }
}

Flutter动画全解（一）隐式动画——Animated系列

Mon, 01 Nov 2021 20:19:45 +0000

隐式动画——Animated系列

1.1 快速开始——AnimatedContainer

//原始main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Container(		//一个普普通通的Container
        width: 300,
        height: 300,
        color: Colors.blue,
        child: const Center(
          child: Text("Hi",
              style: TextStyle(
                fontSize: 72,
              )),
        ),
      ),
    ));
  }
}

//使用AnimatedContainer，并传入Duration，两行代码就可以动起来！
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnimatedContainer(		//将Container换成AnimatedContainer
            duration: const Duration(seconds: 1),	//同时加上duration参数即可
            width: 300,
            height: 100,
            color: Colors.blue,
            child: const Center(
              child: Text("Hi",style: TextStyle(fontSize: 72)),
            ),
          ),
        ),
      ),
    );
  }
}

这里，AnimatedContainer不能管理其child属性的变化，只能在其自身属性变化时产生动画。

值得一提的是，decoration属性是非常好用的，例如：

AnimatedContainer(
  duration: const Duration(seconds: 1),
  width: 300,
  height: 300,
  //color: Colors.blue,			//设置decoration属性后，color属性必须删除
  decoration: BoxDecoration(
    gradient: const LinearGradient(			//设置渐变色
      begin: Alignment.bottomCenter,    //橙色从底部中心开始
      end: Alignment.topCenter,         //白色从顶部中心开始
      colors: [Colors.orange, Colors.white],
      stops: [0.5,0.7],                 //只在这个区间内设置动画效果
    ),
    boxShadow: const [BoxShadow(spreadRadius: 5, blurRadius: 25)],	//边框半径5，阴影半径25
    borderRadius: BorderRadius.circular(150)  //设置300/2=150，出现正圆形；设置0，变为方形
  ),
  child: const Center(
    child: Text("Hi",style: TextStyle(fontSize: 72)),
  ),
),

最终效果图如上。

1.2 在不同控件间切换——AnimatedSwitcher

AnimatedSwitcher主要监控child属性，如果其child属性发生变化，则会在替换控件时添加过渡动画。如果child变为null，那么该控件将渐渐消失。

AnimatedSwitcher根据 1.child的属性 2.key属性来判断控件是否变化。

AnimatedSwitcher(
  transitionBuilder: (child, animation) {   //自定义动画
    //return FadeTransition(opacity: animation, child: child);  //默认效果：透明度渐变
    //return ScaleTransition(scale: animation, child: child); //缩放动画
    return RotationTransition(turns: animation, child: child); //旋转动画
  },
  duration: const Duration(seconds: 1),	//动画持续1秒
  //child: CircularProgressIndicator(),
  child: Text("h22i",
  	key: UniqueKey(),     //每次都生成一个新的key，因此AnimatedSwitcher每次都会播放切换动画
  	style: const TextStyle(fontSize: 100)
  ),
)

在transitionBuilder中，也可以嵌套使用多种动画：

transitionBuilder: (child, animation) {   //自定义动画
  return FadeTransition(   //不透明度渐变 + 旋转动画 的嵌套
    opacity: animation,
    child: RotationTransition(turns: animation, child: child), //旋转动画
  );
},

如果你只有两个控件，要实现来回切换的效果，可以使用优化过后的AnimatedCrossFade控件。

1.3 曲线——Curves.bounceOut

AnimatedOpacity(
	duration: const Duration(seconds: 1),
	curve: Curves.bounceOut,    //设置回弹曲线
	opacity: 0,
	child: Container(width: 300, height: 300, color: Colors.blue),
),

可以多个Animated控件嵌套，例如：

AnimatedPadding(
  duration: const Duration(seconds: 1),
  padding: const EdgeInsets.only(top: 200.0),
  curve: Curves.bounceOut, //设置回弹曲线，默认Curves.linear
  child: AnimatedOpacity(   //AnimatedPadding中嵌套AnimatedOpacity，但动画会一同开始
    duration: const Duration(seconds: 1),
    opacity: 0.5,
    child: Container(width: 300, height: 300, color: Colors.blue),
  ),
),

1.4 Animated还不够？自制补间动画——TweenAnimationBuilder

使用TweenAnimationBuilder和Tween来创建补间动画。

//使用TweenAnimationBuilder自制一个AnimatedOpacity

TweenAnimationBuilder(
  duration: const Duration(seconds: 1),
  //其中，begin的值只在开始时有效，后期如果修改了end，则会从当前状态（而不是begin）前往新的end
  //从begin到end期间，builder函数会被反复调用，反复渲染新的（含value）的控件
  tween: Tween<double>(begin: 0.0, end: 0.5),   
  //builder是复杂形式的child（如ListBuilder）
  builder: (BuildContext context, double value, Widget? child)=> Opacity(
    opacity: value,	//value也就是tween自动生成的那个值（0.0-0.5之间）
    child: child  //参数中的child不会被反复渲染，而会使用原来的child，达到一个优化的效果
  ),
  child: Container( 
    //这里的child（也就是直属于TweenAnimationBuilder的child）就是builder函数中的child
    //builder不会反复渲染这里的child，达到一个优化的效果
    width: 300,
    height: 300,
    color: Colors.red,
  ),
),

使用Transform来定义变换：

//旋转变换
TweenAnimationBuilder(
  duration: const Duration(seconds: 1),
  tween: Tween<double>(begin: 1.0, end: 6.0),   //忽略begin，则此时begin=end，启动时动画不播放
  builder: (BuildContext context, double value, Widget? child) => Container(
    width: 300,
    height: 300,
    color: Colors.red,
    // * 任何平移旋转缩放操作都能用4*4矩阵表示
    //Transform( transform: Matrix4.identity().translate(x),
    // * 或者使用 Transform.scale缩放 / .rotate旋转(angle:0-2pi) / .translate平移
    child: Center(child: Transform.rotate(	//旋转
      angle: value, 
      child: const Text("Hi",style: TextStyle(fontSize: 70)),
    ),
   ),
  ),
),

//平移变换
TweenAnimationBuilder(
  duration: const Duration(seconds: 1),
  //tween中可以直接放置offset
  tween: Tween(begin: const Offset(0,0), end: const Offset(40,0)),
  builder: (BuildContext context, Offset value, Widget? child) => Container(
    width: 300,
    height: 300,
    color: Colors.red,
    child: Center(child: Transform.translate(//平移操作
      offset: value,
      child: const Text("Hi",style: TextStyle(fontSize: 70),),
    ),
   ),
  ),
),

1.5 计数器动画

实现的效果如下：

代码：

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Container(
      width: 300,
      height: 120,
      color: Colors.blue,
      child: const AnimatedCounter(4,duration: Duration(seconds: 1)), //使用滚动计数器
    ))));
  }
}

//滚动计数器
class AnimatedCounter extends StatelessWidget {
  final int number;
  final Duration duration;
  const AnimatedCounter(this.number, {this.duration = const Duration(seconds: 1) ,Key? key})
   : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
        duration: duration,
        tween: Tween<double>(end: number.toDouble()), //调整end
        builder: (context, double? value, child) {
          final whole = value! ~/ 1; //整数部分
          final decimal = value - whole;
          return Stack(children: [
            _MyText("$whole", position: -100 * decimal, opacity: 1 - decimal),
            _MyText("${whole + 1}",
                position: 100 - decimal * 100, opacity: decimal),
          ]);
        });
  }
}

class _MyText extends StatelessWidget {
  final String text;
  final double position;
  final double opacity;
  const _MyText(this.text,
      {required this.position, required this.opacity, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Positioned(
      child: Opacity(
        opacity: opacity,
        child: Text(text, style: const TextStyle(fontSize: 100)),
      ),
      top: position,
    );
  }
}