Flutter Animation动画开发之——Curve动画曲线
简介
在Flutter Animation动画开发之——最简单的动画入门这篇文章中我们介绍了最简单的动画开发流程
今天我们在该动画的基础上添加动画曲线，默认情况下动画是线性的，可以理解为变化是匀速的，设置动画曲线可以设置动画的变化速率，可以是加速的，也可以是减速的，或者是先加速后减速的，等等
动画曲线用的是CurvedAnimation类，用法如下，
- parent参数传入一个Animation对象，比如AnimationController
- curve传入传入的就是动画曲线的具体实现，Curves类中已经帮我们默认实现了很多常用的动画曲线，比如减速运动Curves.decelerate
CurvedAnimation animation=CurvedAnimation(parent: controller, curve: Curves.linear);下面表格列出一些常见的曲线，其他还有许多预定义的曲线，可以自行去了解
| Curves曲线 | 动画过程 |
|---|---|
| linear | 匀速的 |
| decelerate | 匀减速 |
| ease | 开始加速，后面减速 |
| easeIn | 开始慢，后面快 |
| easeOut | 开始快，后面慢 |
| easeInOut | 开始慢，然后加速，最后再减速 |
示例
下面贴出一个完整的domo，演示一个绿色方块宽高从100变化成500的动画过程，变化的曲线为easeInOut，也就是先加速后减速的过程
class AnimationRoute extends StatefulWidget {@overrideAnimationRouteState createState() => AnimationRouteState();
}class AnimationRouteState extends State with SingleTickerProviderStateMixin {Animation animation;AnimationController controller;initState() {super.initState();// Controller设置动画时长// vsync设置一个TickerProvider，当前State 混合了SingleTickerProviderStateMixin就是一个TickerProvidercontroller = AnimationController(duration: Duration(seconds: 5),vsync: this //);// 设置动画曲线，开始快慢，先加速后减速animation=CurvedAnimation(parent: controller, curve: Curves.easeInOut);// Tween设置动画的区间值，animate()方法传入一个Animation，AnimationController继承Animationanimation = new Tween(begin: 100.0, end: 500.0).animate(animation)// addListener监听动画每一帧的回调，这个调用setState()刷新UI..addListener(() {setState(()=>{});});//启动动画(正向执行)controller.forward();}@overrideWidget build(BuildContext context) {return Center(// 这里显示一个方形区域，随着动画执行不断变大child: Container(color: Colors.green,width: animation.value,height: animation.value,),);}@overridevoid dispose() {// 释放资源controller.dispose();super.dispose();}
} 自定义Curve
除了用预定义的Curve外，我们还可以自定义自己的Curve曲线，原理很简单，只需实现Curve，然后实现里面的gransformInternal方法，自己做一些变换
例如以下是最简单的Curve实现，未做任何变换，将t直接返回，这就是线性动画
class _Linear extends Curve {const _Linear._();@overridedouble transformInternal(double t) => t;
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！