Home

深色模式

Flutter Curve效果 ​

文档 ​

可以在Flutter Curve中，预览各种Curve的效果。

Curve分类 ​

基础曲线 ​

  • linear - 线性曲线，匀速运动

标准缓动曲线 ​

  • ease - 标准缓动
  • easeIn - 缓入
  • easeOut - 缓出
  • easeInOut - 缓入缓出

多项式曲线 ​

基于不同次数的多项式方程：

  • 二次方程系列 - easeInQuad、easeOutQuad、easeInOutQuad
  • 三次方程系列 - easeInCubic、easeOutCubic、easeInOutCubic、easeInCubicEmphasized
  • 四次方程系列 - easeInQuart、easeOutQuart、easeInOutQuart
  • 五次方程系列 - easeInQuint、easeOutQuint、easeInOutQuint

三角函数曲线 ​

  • 正弦函数系列 - easeInSine、easeOutSine、easeInOutSine
  • 圆形函数系列 - easeInCirc、easeOutCirc、easeInOutCirc

指数曲线 ​

  • 指数函数系列 - easeInExpo、easeOutExpo、easeInOutExpo

物理效果曲线 ​

模拟真实物理效果：

  • 弹性效果 - elasticIn、elasticOut、elasticInOut
  • 弹跳效果 - bounceIn、bounceOut、bounceInOut
  • 回弹效果 - easeInBack、easeOutBack、easeInOutBack

特殊用途曲线 ​

针对特定场景设计：

  • decelerate - 减速曲线
  • fastOutSlowIn - 快出慢入
  • slowMiddle - 中间减慢
  • fastEaseInToSlowEaseOut - 快速缓入到慢速缓出
  • fastLinearToSlowEaseIn - 快速线性到慢速缓入
  • linearToEaseOut - 线性到缓出
  • easeInToLinear - 缓入到线性

Curve介绍 ​

linear ​

线性动画曲线，动画以恒定速度进行，没有加速或减速效果。

ease ​

三次贝塞尔曲线，快速启动，缓慢结束。等同于CSS的ease函数。

easeIn ​

三次贝塞尔曲线，缓慢启动，快速结束。等同于CSS的ease-in函数。

easeOut ​

三次贝塞尔曲线，快速启动，缓慢结束。等同于CSS的ease-out函数。

easeInOut ​

三次贝塞尔曲线，缓慢启动，中间加速，缓慢结束。等同于CSS的ease-in-out函数。

easeInQuad ​

基于二次方程的曲线，缓慢启动，快速结束。公式：f(t) = t²。

easeOutQuad ​

基于二次方程的曲线，快速启动，缓慢结束。与decelerate效果相同。

easeInOutQuad ​

二次方程曲线的组合，前半段为easeInQuad，后半段为easeOutQuad。

easeInCubic ​

基于三次方程的曲线，缓慢启动，快速结束。公式：f(t) = t³。适合控件移出视口的动画。

easeOutCubic ​

三次方程曲线，快速启动，缓慢结束。是easeInCubic的翻转版本。

easeInOutCubic ​

三次方程曲线的组合，前半段为easeInCubic，后半段为easeOutCubic。

easeInCubicEmphasized ​

三次方程曲线的强调版本，缓慢启动，短暂加速，然后缓慢结束。比easeInOutCubic更陡峭。

easeInQuart ​

基于四次方程的曲线，缓慢启动，快速结束。公式：f(t) = t⁴。

easeOutQuart ​

四次方程曲线，快速启动，缓慢结束。是easeInQuart的翻转版本。

easeInOutQuart ​

四次方程曲线的组合，前半段为easeInQuart，后半段为easeOutQuart。

easeInQuint ​

基于五次方程的曲线，缓慢启动，快速结束。公式：f(t) = t⁵。

easeOutQuint ​

五次方程曲线，快速启动，缓慢结束。是easeInQuint的翻转版本。

easeInOutQuint ​

五次方程曲线的组合，前半段为easeInQuint，后半段为easeOutQuint。

easeInExpo ​

基于指数方程的曲线，缓慢启动，快速结束。公式：f(t) = 2¹⁰⁽ᵗ⁻¹⁾。

easeOutExpo ​

指数曲线，快速启动，缓慢结束。是easeInExpo的翻转版本。使用时可能需要更长的持续时间来补偿曲线的陡峭度。

easeInOutExpo ​

指数曲线的组合，前半段为easeInExpo，后半段为easeOutExpo。

easeInSine ​

基于正弦函数的曲线，缓慢启动，快速结束。类似easeIn但开始和结束稍微平缓一些。

easeOutSine ​

基于正弦函数的曲线，快速启动，缓慢结束。类似easeOut但开始和结束稍微平缓一些。

easeInOutSine ​

正弦曲线的组合，前半段为easeInSine，后半段为easeOutSine。比easeInOut的开始和结束更平缓。

easeInCirc ​

基于圆形方程的曲线，缓慢启动，快速结束。相当于圆的右下四分之一。

easeOutCirc ​

基于圆形方程的曲线，快速启动，缓慢结束。相当于圆的左上四分之一。

easeInOutCirc ​

圆形曲线的组合，前半段为easeInCirc，后半段为easeOutCirc。

easeInBack ​

回弹曲线，缓慢启动并在到达终点前超出边界。类似elasticIn但只超出一次，没有重复摆动。

easeOutBack ​

回弹曲线，快速启动并在到达终点时超出边界。类似elasticOut但只超出一次。

easeInOutBack ​

回弹曲线的组合，前半段为easeInBack，后半段为easeOutBack。

elasticIn ​

弹性曲线，在增长过程中震荡并超出边界。产生类似弹簧的弹性效果。

elasticOut ​

弹性曲线，在结束时震荡并超出边界。产生弹性回弹效果。

elasticInOut ​

弹性曲线的组合，先增长然后收缩，过程中都会超出边界产生弹性效果。

bounceIn ​

弹跳曲线，产生弹跳增长的震荡效果。

bounceOut ​

弹跳曲线，产生弹跳结束的震荡效果。

bounceInOut ​

弹跳曲线的组合，先增长后收缩，都带有弹跳震荡效果。

decelerate ​

减速曲线，快速启动然后减速。相当于倒置的抛物线f(t) = t²。

fastOutSlowIn ​

快速启动，缓慢进入最终位置的曲线。

slowMiddle ​

快速启动，中间放慢，然后快速结束的立方曲线。

fastEaseInToSlowEaseOut ​

缓慢启动，快速加速，然后缓慢结束的曲线。

fastLinearToSlowEaseIn ​

开始时非常陡峭和线性，然后快速变平并非常缓慢地缓入的曲线。

linearToEaseOut ​

线性启动，缓慢结束的三次动画曲线。

easeInToLinear ​

缓慢启动，线性结束的三次动画曲线。