flutter3.0学习笔记

Curve

Preview
  • Curve
  • 自定义Curves

Curve

Curve:在Flutter中指动画执行曲线,并不是指动画变化轨迹,而是指负责控制动画变化的速率。

动画变化速率指:动画变化过程中均匀变化,加速(先慢后快),减速(先快后慢)等的动画动作。

在曲线变化时的类有:CurvedAnimation或者CurveTween。

Curves 类是一个预置的枚举类,定义了许多常用的曲线:

  1. linear(匀速的)
Curves.linear
  1. decelerate(匀减速)
Curves.decelerate
  1. ease(开始加速,后面减速)
Curves.ease
  1. easeIn(开始慢,后面快)
Curves.easeIn
  1. easeOut(开始快,后面慢)
Curves.easeOut
  1. easeInOut(开始慢,然后加速,最后再减速)
Curves.easeInOut
  1. easeInSine
Curves.easeInSine
  1. easeInQuad
Curves.easeInQuad
  1. easeInCubic
Curves.easeInCubic
  1. easeInQuart
Curves.easeInQuart
  1. easeInQuint
Curves.easeInQuint
  1. bounceIn(弹跳)
Curves.bounceIn
  1. bounceInOut
Curves.bounceIn
  1. bounceOut
Curves.bounceOut
  1. easeInSine
Curves.easeInSine

自定义Curves

从源码中可以看到 Curve里有可以实现两个方法,官方建议实现transformInternal方法,因为transform方法内部直接返回了transformInternal这个方法。

...
 T transform(double t) {
    assert(t != null);
    assert(t >= 0.0 && t <= 1.0, 'parametric value $t is outside of [0, 1] range.');
    return transformInternal(t);
  }
 ...

所以定义一个类,继承Curve,实现transformInternal方法即可。

class MyCurve extends Curve {
  final double count;
  CustomCurve({this.count = 1});
  @override
  double transformInternal(double t) {
    return sin(count * 2 * t) * 0.5 + 0.5;
  }
}

或者:

class CustomCurve extends Curve {
  final double count;
  CustomCurve({this.count = 1});
  @override
  double transform(double t) {
    return sin(count * 2 * t) * 0.5 + 0.5;
  }
}