前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 动画之 Animation

Flutter 动画之 Animation

作者头像
张风捷特烈
发布2020-04-30 15:24:27
2K0
发布2020-04-30 15:24:27
举报
1.前言
1.1:Flutter动画中:

首先要看的是Flutter中动画的几个类之间的关系:

主角当然是我们的Animation类了,它可以借助Animatable进行强化 Animatable通过animate函数接收一个Animation对象,再返回Animation对象,这不就是包装吗? 通过Animation对象回调即可获取规律变画的值,进行渲染。这是动画的基本。


1.2:Animation和Animation体系一览

整个Flutter的Animation相比Android还是比较简单的


1.3:介绍今天的主角nStarPath

我们通过变动这个函数中的参数让路径动态变化实现动画

代码语言:javascript
复制
/// 可以创建一个外接圆半径为[R],内接圆半径半径为[r]的[num]角星路径
Path nStarPath(int num, double R, double r) {
  Path path = new Path();
  double perDeg = 360 / num;
  double degA = perDeg/2/2;
  double degB = (360 / (num - 1) - degA) / 2 + degA;

  path.moveTo(cos(_rad(degA)) * R, (-sin(_rad(degA)) * R));
  for (int i = 0; i < num; i++) {
    path.lineTo(
        cos(_rad(degA + perDeg * i)) * R, -sin(_rad(degA + perDeg * i)) * R);
    path.lineTo(
        cos(_rad(degB + perDeg * i)) * r, -sin(_rad(degB + perDeg * i)) * r);
  }
  path.close();
  return path;
}

double _rad(double deg) {
  return deg * pi / 180;
}

1.4:动画舞台的搭建

对于动画的演示,最好的当然是绘制了,绘制中最好的当然是我的五角星了 感觉创建StatefulWidget的代码开始时基本一致,写了一篇模板解析器 玩转字符串篇--Gradle+代码生成器=懒人必备

代码语言:javascript
复制
import 'package:flutter/material.dart';

class AnimPage extends StatefulWidget {
  @override
  _AnimPageState createState() => _AnimPageState();
}

class _AnimPageState extends State<AnimPage>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter之旅"),
      ),
      body: CustomPaint(
        painter: AnimView(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
         //TODO 执行动画
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class AnimView extends CustomPainter {
  Paint mPaint;
  Paint gridPaint;

  AnimView() {
    mPaint = new Paint();
    gridPaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = Colors.cyanAccent;
    mPaint.color = Colors.deepOrange;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawPath(gridPath(area: Size(500, 1000)), gridPaint);//绘制网格
    canvas.translate(200, 200);
    canvas.drawPath(nStarPath(5, 100, 50), mPaint);//绘制五角星
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

/// 可以创建一个外接圆半径为[R],内接圆半径半径为[r]的[num]角星,
Path nStarPath(int num, double R, double r) {
  Path path = new Path();
  double perDeg = 360 / num;
  double degA = perDeg/2/2;
  double degB = (360 / (num - 1) - degA) / 2 + degA;

  path.moveTo(cos(_rad(degA)) * R, (-sin(_rad(degA)) * R));
  for (int i = 0; i < num; i++) {
    path.lineTo(
        cos(_rad(degA + perDeg * i)) * R, -sin(_rad(degA + perDeg * i)) * R);
    path.lineTo(
        cos(_rad(degB + perDeg * i)) * r, -sin(_rad(degB + perDeg * i)) * r);
  }
  path.close();
  return path;
}

double _rad(double deg) {
  return deg * pi / 180;
}

///创建一个区域是[area],小格边长为[step]的网格的路径
Path gridPath({double step = 20, Size area}) {
  Path path = Path();
  for (int i = 0; i < area.height / step + 1; i++) {
    //画横线
    path.moveTo(0, step * i); //移动画笔
    path.lineTo(area.width, step * i); //画直线
  }

  for (int i = 0; i < area.width / step + 1; i++) {
    //画纵线
    path.moveTo(step * i, 0);
    path.lineTo(step * i, area.height);
  }
  return path;
}
复制代码

好了,现在开始Flutter的动画之旅


2.Flutter动画基本使用

这里再贴一下这张Animation使用图:


2.1:动画的基本使用:Tween+AnimationController

1.让_AnimPageState类with一下SingleTickerProviderStateMixin 2.使用创建一个AnimationController对象(Animation族) 3.复写SingleTickerProviderStateMixin的dispose方法释放AnimationController对象 4.创建Tween对象(Animatable族)并调用animate方法,生成新的Animation对象 5.监听Animation的变化,获取每次刷新时的值。

代码语言:javascript
复制
class _AnimPageState extends State<AnimPage> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

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

    controller = AnimationController(////创建 Animation对象
        duration: const Duration(milliseconds: 2000), //时长
        vsync: this);

    var tween = Tween(begin: 25.0, end: 150.0); //创建从25到150变化的Animatable对象
    animation = tween.animate(controller); //执行animate方法,生成
    animation.addListener(() {
      print(animation.value);
    });
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose(); // 资源释放
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //略同...
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.forward(); //执行动画
        },
       //略同...
    );
  }
}
复制代码

注:有时候为了方便可以连写,关于SingleTickerProviderStateMixin这里不做深究, 但要知道,既然是mixin就是给类附加能力的,其中之一便是dispose()方法

代码语言:javascript
复制
animation = Tween(begin: 25.0, end: 150.0).animate(controller)
    ..addListener(() {
      print(animation.value);
    });

看一下控制台打印结果:从25~150变化的一群数字

代码语言:javascript
复制
---->[控制台打印]----
I/flutter ( 9073): 25.0
I/flutter ( 9073): 26.1205625
I/flutter ( 9073): 27.2418125
I/flutter ( 9073): 28.363125
出处略去n行....
I/flutter ( 9073): 147.20725
I/flutter ( 9073): 148.3288125
I/flutter ( 9073): 149.4503125
I/flutter ( 9073): 150.0

2.2:热身运动,看一下Tween下点的轨迹

也是突发奇想,数字在不断变化,这可都是白花花的资源啊,要不秀一个 这个小例子完美的阐述了Tween补间的动画是匀速的

代码语言:javascript
复制
class AnimPage extends StatefulWidget {
  @override
  _AnimPageState createState() => _AnimPageState();
}

class _AnimPageState extends State<AnimPage>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
  List<Offset> _points=[];//点集

  @override
  void initState() {
    super.initState();
    controller = AnimationController(//创建 Animation对象
        duration: const Duration(milliseconds: 2000), //时长
        vsync: this);

    var tween = Tween(begin: 25.0, end: 150.0); //创建从25到150变化的Animatable对象
    animation = tween.animate(controller); //执行animate方法,生成
    animation.addListener(() {
      render(_points,animation.value);
    });
  }
  @override
  void dispose() {
    super.dispose();
    controller.dispose(); // 资源释放
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter之旅"),
      ),
      body: CustomPaint(
        painter: AnimView(_points),//入参
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.forward(); //执行动画
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
  double x=0;
  //核心渲染方法,将值加入集合中并渲染
  void render(List<Offset> _points, double value) {
    _points.add(Offset(x, -value));
    x++;
    setState(() {//更新组件
    });
  }
}

class AnimView extends CustomPainter {
  List<Offset> _points;
  Paint mPaint;
  Paint gridPaint;
  AnimView(this._points) {
    mPaint = new Paint();
    gridPaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = Colors.cyanAccent;
    mPaint..color = Colors.deepOrange..strokeWidth=3;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawPath(gridPath(area: Size(500, 1000)), gridPaint);
    canvas.translate(200,200);
    canvas.drawCircle(Offset(0, 0), 2.5, gridPaint..color=Colors.black..style=PaintingStyle.fill);
    _drawStar(canvas,_points);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

  void _drawStar(Canvas canvas, List<Offset> pos) {
    canvas.drawPoints(PointMode.lines, pos, mPaint);
  }
}

///创建一个区域是[area],小格边长为[step]的网格的路径
Path gridPath({double step = 20, Size area}) {
  Path path = Path();
  for (int i = 0; i < area.height / step + 1; i++) {
    //画横线
    path.moveTo(0, step * i); //移动画笔
    path.lineTo(area.width, step * i); //画直线
  }

  for (int i = 0; i < area.width / step + 1; i++) {
    //画纵线
    path.moveTo(step * i, 0);
    path.lineTo(step * i, area.height);
  }
  return path;
}

复制代码

2.3:创建星星的描述类和绘制

三个属性,外接圆半径,内接圆半径和角数

代码语言:javascript
复制
class Star{
  int num;
  double R;
  double r;
  Star(this.num,this.R,this.r);
}

---->[AnimView类]----
class AnimView extends CustomPainter {
  Star _star;

  AnimView(this._star) {
    //略同...
  }

  @override
  void paint(Canvas canvas, Size size) {
    //略同...
    _drawStar(canvas,_star);
  }
  //绘制星星
  void _drawStar(Canvas canvas, Star star) {
    canvas.drawPath(nStarPath(star.num, star.R, star.r), mPaint);
  }
}

---->[_AnimPageState类]----
class _AnimPageState extends State<AnimPage>
    with SingleTickerProviderStateMixin {
    
  Star _star;
  @override
  void initState() {
    _star=Star(5, 100, 50);
      //略同...
  }

  @override
  Widget build(BuildContext context) {
        //略同...
      body: CustomPaint(
        painter: AnimView(_star),
复制代码

2.3:动态更新

只需要在刷新的时候更改五角星的属性就行了,下面就是外接圆半径25~150变化

代码语言:javascript
复制
animation.addListener(() {
  render(_star,animation.value);
}

//核心渲染方法
void render(Star star, double value) {
  star.R=value;
  setState(() {//更新组件
  });
}

2.4:int数据的动画:IntTween

Tween是两个double类型的数字在一定的时间内的均匀变化 那int该肿么办?Tween之下有二十来个孩子用于不同的对象变化 其一便是IntTween,这里让星星的角数从5~100不断变化形成动画

代码语言:javascript
复制
class _AnimPageState extends State<AnimPage>
    with SingleTickerProviderStateMixin {
  Animation<int> animation;//改成int泛型
 //略同...

  @override
  void initState() {
  //略同...
    var intTween = IntTween(begin: 5, end: 100); 
  //略同...

  }

  //核心渲染方法
  void render(Star star, int value) {
    star.num=value;
    setState(() {//更新组件
    });
  }
}
复制代码

实现起来还是比较简单的


2.5:颜色变化: ColorTween

顾名思义,匀速改变颜色呗,思路是一致的,这里先给Star描述类价格color字段 在Canvas绘制时使用Satr的颜色,这样在刷新时就会呈现颜色渐变

代码语言:javascript
复制
class Star{
  //略同...
  Color color;
  Star(this.num,this.R,this.r,this.color);
}

class _AnimPageState extends State<AnimPage>
    with SingleTickerProviderStateMixin {
  Animation<Color> animation;
 //略同...
  @override
  void initState() {
    _star=Star(5, 100, 60,Colors.red);
    //略同...
    var colorTween = ColorTween(begin: Colors.red, end: Colors.yellow); 
    //创建从红到黄变化的Animatable对象

  }
  
  //核心渲染方法
  void render(Star star, Color value) {
    star.color=value;
    setState(() {//更新组件

    });
  }
}

---->[AnimView:绘制时使用颜色]----
void _drawStar(Canvas canvas, Star star) {
  canvas.drawPath(nStarPath(star.num, star.R, star.r), mPaint..color=star.color);
}
复制代码

3.让动画更有动感:CurveTween

看名字是曲线补间,也就是运动不再是匀速的,可以自己设计。

3.1:看一下CurveTween的源码

需要一个curve属性,对应的是Curve对象。 Curve为抽象类,有一个四入参的子类Cubic,去吧,皮卡丘就决定是你了。

代码语言:javascript
复制
---->[CurveTween]----
class CurveTween extends Animatable<double> {
  CurveTween({ @required this.curve })
    : assert(curve != null);
  Curve curve;
  
---->[Curve]----
@immutable
abstract class Curve {

---->[Curve]----
class Cubic extends Curve {
  const Cubic(this.a, this.b, this.c, this.d)

3.2:关于曲线参数的获取

记得掘金的头像可以转,Chrome浏览器里有个小功能,在调试面板里 看来一下有个lazy的样式下的translation,点开可以调试曲线,获取四个值

用刚才的画点方法看了一下数据的变动情况


3.3:代码操作

根据包装设设计模式的思想,CurveTween可以强化Animation拥有从0~1的曲线, 然后再送到Tween中进行补间,让其在两个数的范围内具有曲线补间能力

代码语言:javascript
复制
controller = AnimationController(//创建 Animation对象
    duration: const Duration(milliseconds: 2000), //时长
    vsync: this);
    
var curveTween = CurveTween(curve:Cubic(0.96, 0.13, 0.1, 1.2));//创建curveTween
var tween=Tween(begin: 50.0, end: 100.0);
animation = tween.animate(curveTween.animate(controller));

animation.addListener(() {
  render(_star,animation.value);
});

另外,Curves中也定义了41个常用的Curve,来方便使用,大家可以试试


4.动画的监听和动画序列
4.1:运动状态:AnimationStatus

相像一下,一个百米跑道标注着刻度,哨声一响,你开始跑

代码语言:javascript
复制
enum AnimationStatus {
  dismissed,//在正在开始时停止了?跌倒在起跑线上
  forward,//运动中
  reverse,//跑到终点,再跑回来的时候
  completed,//跑到终点时
}

4.2:为Animation添加监听

通过Animation#addStatusListener可以回调AnimationStatus对象

代码语言:javascript
复制
animation.addStatusListener((status){
  switch(status){
    case AnimationStatus.completed:
      controller.reverse();//反向
      break;
    case AnimationStatus.forward:
      break;
    case AnimationStatus.reverse:
      _star.color=randomRGB();
      break;
    case AnimationStatus.dismissed:
      controller.forward();
      break;
  }
});

4.3:最后说一下序列动画

找了好一会都没有发现多值的api,只有start和end两个值 然后翻译一下源码,看到还有个TweenSequence,顾名思义,序列动画 现在重新写个组件叫FlutterText,拥有颤动效果的文字

代码语言:javascript
复制
class FlutterText extends StatefulWidget {
  var str;
  var style;

  FlutterText(this.str, this.style);

  _FlutterTextState createState() => _FlutterTextState();
}

class _FlutterTextState extends State<FlutterText>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this);
    
    animation = TweenSequence<double>([//使用TweenSequence进行多组补间动画
      TweenSequenceItem<double>(tween: Tween(begin: 0, end: 15), weight: 1),
      TweenSequenceItem<double>(tween: Tween(begin: 15, end: 0), weight: 2),
      TweenSequenceItem<double>(tween: Tween(begin: 0, end: -15), weight: 3),
      TweenSequenceItem<double>(tween: Tween(begin: -15, end: 0), weight: 4),
    ]).animate(controller)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((s) {
        if (s == AnimationStatus.completed) {
          setState(() {});
        }
      });
    controller.forward();
  }

  Widget build(BuildContext context) {
    var result = Transform(
      transform: Matrix4.rotationZ(animation.value * pi / 180),
      alignment: Alignment.center,
      child: Text(
        widget.str,
        style: widget.style,
      ),
    );

    return result;
  }
  dispose() {
    controller.dispose();
    super.dispose();
  }
}

复制代码

这样,Animation基本用法就说完了,还有几个类就不一一介绍了,基本使用都差不多

关于动画效果,是一个永远也无法满足的深渊,它无法言尽。

一张经典的画作重要的不是画笔,而是握笔的人,你的动画属于你。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年07月18日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.前言
    • 1.1:Flutter动画中:
      • 1.2:Animation和Animation体系一览
        • 1.3:介绍今天的主角nStarPath
          • 1.4:动画舞台的搭建
          • 2.Flutter动画基本使用
            • 2.1:动画的基本使用:Tween+AnimationController
              • 2.2:热身运动,看一下Tween下点的轨迹
                • 2.3:创建星星的描述类和绘制
                  • 2.3:动态更新
                    • 2.4:int数据的动画:IntTween
                      • 2.5:颜色变化: ColorTween
                      • 3.让动画更有动感:CurveTween
                        • 3.1:看一下CurveTween的源码
                          • 3.2:关于曲线参数的获取
                            • 3.3:代码操作
                            • 4.动画的监听和动画序列
                              • 4.1:运动状态:AnimationStatus
                                • 4.2:为Animation添加监听
                                  • 4.3:最后说一下序列动画
                                  领券
                                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档