Flutter 动画学习

本文深入讲解Flutter动画原理,包括属性如大小、透明度、旋转和滑行,动画本质及插值器/估值器的作用,详细解析动画类型如Tween动画与基于物理的动画,以及AnimatedWidget和AnimatedBuilder的使用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概念理解
一个物体的属性包括:大小(Size),透明(Opacity),旋转(Rotation) 滑行(Slide)

动画是驱动器,动画属性,曲线快慢(时间间隔) ,多个动画公用一个驱动器的时候,可以让某一段时间运行某一个动画
驱动器负责心跳
曲线和动画属性共同提供动画当前的属性值

动画本质

1.改变Widget的属性值
2. 估值器 插值器 然后作用到controller上面,controller获取对应的值作用到Widget
3. 范围 快慢 时间 是否重复 获取对应的值来改变Widget

插值器/估值器

为了使得动画呈现出丰富的动画效果,就需要使用非线性动画,插值器与估值器可以解决这个问题。概念如下所示:

  1. 插值器:设置属性值从初始值过渡到结束值的变化规律,如匀速、加速及减速等等。即确定了动画效果变化的模式,如匀速变化、加速变化等等。主要应用于实现非线性运动的动画效果。
  2. 估值器:设置属性值从初始值过渡到结束值的变化具体数值。估值器的作用是协助插值器实现非线性运动的动画效果。插值器决定值的变化规律(匀速、加速),即决定的是变化趋势,而接下来的具体变化数值则交给估值器。如:动画进行了50%(初始值=100,结束值=200 ),那么匀速插值器计算出了当前属性值改变的百分比是50%,那么估值器则负责计算当前属性值 = 100 + (200-100)x50% = 150。插值器其实并不复杂,就是一个数学函数,设置属性值从初始值过渡到结束值的变化规律。每个平台都有自己定义好的一系列插值器,可以供开发者选择使用,也提供自定义的接口,本质上是一个贝塞尔函数。
Flutter中的动画类型

Flutter中动画分为两类,如下所示:

  1. 补间(Tween)动画:定义开始点、结束点、时间和速度等参数,然后由框架自动计算如何从开始点过度达到结束点。
  2. 基于物理的动画:模拟真实世界的行为。例如,当你掷球时,球在何处落地,取决于抛球速度有多快、球有多重、距离地面有多远。
动画 Animation
  1. Tween (start-end)补间对象,用于计算动画使用的数据范围之间的插值。
  2. AnimationStatus()
  3. Listeners和StatusListeners 用于监听动画状态改变
  4. object 属性
  5. AnimationController 控制器
  6. CurvedAnimation 用于定义非线性曲线动画
Tween (估值器 给出范围的值)

开始值和结束值之间的线性插值
如果你想在一个范围内做插值会很有用吗


_animation = _controller.drive(
  Tween<Offset>(
    begin: const Offset(100.0, 50.0),
    end: const Offset(200.0, 300.0),
  ),
);

_animation = Tween<Offset>(
  begin: const Offset(100.0, 50.0),
  end: const Offset(200.0, 300.0),
).animate(_controller);


Tween 子类
子类
ReverseTween一个[补间],它以相反的方式计算它的[父]
ColorTween两种颜色之间的插值,使用Color.lerp
SizeTween两个尺寸之间的插值,使用Size.lerp
RectTweenRect.lerp
IntTween两个整数之间的补全运算
StepTween两个整型之间的插值
ConstantTween具有常数值的补间
CurveTween
AnimatedWidget当给定的[Listenable]更改值时重新构建的小部件

T lerp(double t) {
  assert(begin != null);
  assert(end != null);
  //返回值 = 开始值 + (结束值 - 开始值) * 传入值
  return begin + (end - begin) * t;}

 transform(double t) {
  //开始
  if (t == 0.0)
    return begin;
  //结束
  if (t == 1.0)
    return end;
  //中间值  
  return lerp(t);}
  
AnimatedWidget 对于没有附加状态的简单情况,可以考虑使用
class Spinner extends StatefulWidget {
  
  _SpinnerState createState() => _SpinnerState();
}

class _SpinnerState extends State<Spinner> with TickerProviderStateMixin {
  AnimationController _controller;

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

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

  
  Widget build(BuildContext context) {
    return SpinningContainer(controller: _controller);
  }
}

class SpinningContainer extends AnimatedWidget {
  const SpinningContainer({Key key, AnimationController controller})
      : super(key: key, listenable: controller);

  Animation<double> get _progress => listenable;

  
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: _progress.value * 2.0 * math.pi,
      child: Container(width: 200.0, height: 200.0, color: Colors.green),
    );
  }
}
AnimatedWidget 的子类
子类
RotationTransition旋转
SlideTransition动画小部件相对于其正常位置的位置
ScaleTransition缩放比例
SizeTransition动画自己的大小和剪辑,并对齐其子女
FadeTransition透明
RelativeRectTween两个相对矩形之间的内插 使用RelativeRect.lerp
PositionedTransition只有当它是[Stack]的子元素时才有效
DecoratedBoxTransition[DecoratedBox]的动画版本,它可以动画化[Decoration]的不同属性
AlignTransition使其[Align]具有动画效果的[Align]的动画版本。对齐]属性
DefaultTextStyleTransition画版本的[DefaultTextStyle],它的[TextStyle]的不同属性///动画
AnimatedBuilder用于构建动画的通用小部件
AnimatedBuilder 对于涉及其他状态的更复杂的情况,请考虑使用
 class Spinner extends StatefulWidget {
   
   _SpinnerState createState() => _SpinnerState();
 }

 class _SpinnerState extends State<Spinner> with SingleTickerProviderStateMixin {
   AnimationController _controller;

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

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

   
   Widget build(BuildContext context) {
     return AnimatedBuilder(
       animation: _controller,
       child: Container(
         width: 200.0,
         height: 200.0,
         color: Colors.green,
         child: const Center(
           child: Text('Wee'),
         ),
       ),
       builder: (BuildContext context, Widget child) {
         return Transform.rotate(
           angle: _controller.value * 2.0 * math.pi,
           child: child,
         );
       },
     );
   }
 }
AnimationStatus
状态说明
dismissed动画一开始就停止了
forward动画从头到尾都在播放
reverse动画从结束到开始倒着播放
completed动画在最后停止
Listenable

void addListener(VoidCallback listener);

void removeListener(VoidCallback listener);

void addStatusListener(AnimationStatusListener listener);

void removeStatusListener(AnimationStatusListener listener);

AnimationController
属性说明
Duration这个动画应该持续多长时间
debugLabel是一个字符串,用于在///调试期间帮助识别此动画(由[toString]使用)
lowerBound为该动画所能获得的最小值和///该动画被视为被取消的值。它不能是/// null。
upperBound是该动画可以获得的最大值和///被认为完成该动画的值。它不能是/// null。
TickerProviderTicker的提供者,Ticker的主要作用是每个动画帧调用一次它的回调,作用就显而易见了,相当于给动画添加了一个动起来的引擎

TickerFuture forward({ double from }) {}

TickerFuture reverse({ double from }) {}

TickerFuture repeat({ double min, double max, Duration period }) {}

TickerFuture fling({ double velocity: 1.0 }) {}

void stop({ bool canceled: true }) {}

void dispose() {}

class Foo extends StatefulWidget {
  Foo({ Key key, this.duration }) : super(key: key);

  final Duration duration;

  
  _FooState createState() => _FooState();
}

class _FooState extends State<Foo> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this, // the SingleTickerProviderStateMixin 
      //vsync传入是防止动画离屏之后继续消耗资源
      duration: widget.duration,
    );
  }

  
  void didUpdateWidget(Foo oldWidget) {
    super.didUpdateWidget(oldWidget);
    _controller.duration = widget.duration;
  }

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

  
  Widget build(BuildContext context) {
    return Container(); 
  }
}



Future<void> fadeOutAndUpdateState() async {
  try {
    await fadeAnimationController.forward().orCancel;
    await sizeAnimationController.forward().orCancel;
    setState(() {
      dismissed = true;
    });
  } on TickerCanceled {
    // the animation got canceled, probably because we were disposed
  }
}

CurvedAnimation(插值器 范围内值的变化快慢)

Curves 一组常见的动画缓动曲线
CurveTween 可以用来将[曲线]应用到[动画]中

 final Animation<double> animation = _controller.drive(
  CurveTween(curve: Curves.ease),
 );
  final Animation<double> animation = CurvedAnimation(
  parent: controller,
  curve: Curves.easeIn,
  reverseCurve: Curves.easeOut,
);
TweenSequence
   final Animation<double> animation = TweenSequence(
     <TweenSequenceItem<double>>[
       TweenSequenceItem<double>(
         tween: Tween<double>(begin: 5.0, end: 10.0)
           .chain(CurveTween(curve: Curves.ease)),
         weight: 40.0,
       ),
       TweenSequenceItem<double>(
         tween: ConstantTween<double>(10.0),
         weight: 20.0,
       ),
       TweenSequenceItem<double>(
         tween: Tween<double>(begin: 10.0, end: 5.0)
           .chain(CurveTween(curve: Curves.ease)),
         weight: 40.0,
       ),
     ],
   ).animate(myAnimationController);
Animatable.animate 和 Animatable.chain
SingleTickerProviderStateMixin

vsync对象会绑定动画的定时器到一个可视的Widget,所以当Widget不显示时,动画定时器将会暂停,当Widget再次显示时,动画定时
器重新恢复执行,这样就可以避免动画相关UI不在当前屏幕时消耗资源。如果要使用自定义的State对象作为vsync时,请包含
TickerProviderStateMixin

动画流程

在这里插入图片描述

其他

github

参考文章
  1. Flutter动画详解
  2. flutter源码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值