flutter - 补间动画颤动
问题描述
我想在单击按钮时播放动画。在第一次按下时,小部件旋转 180 度,在第二次按下时,又旋转 180 度(即,它返回到其原始位置)。我怎样才能做到这一点?
模拟手势检测器按钮
Expanded(
child: GestureDetector(
onTap: () => setState(() {
if (tapValue == 0) {
tapValue++;
animController.forward();
beginValue = 0.0;
endValue = 0.5;
} else {
tapValue--;
animController.forward();
}
}),
child: Container(
child: Image.asset('assets/images/enableAsset.png'),
),
),
),
我要旋转的小部件
child: CustomPaint (
painter: SmileyPainter(),
child: RotationTransition(
turns: Tween(begin: beginValue, end: endValue,).animate(animController),
child: CustomPaint (
painter: Smile(),
),
),
)
动画控制器
@override
void initState() {
animController = AnimationController(
duration: const Duration(milliseconds: 400),
vsync: this,
);
super.initState();
}
解决方案
如果您想要实现的只是旋转一个小部件,我建议您避免使用控制器。这不仅会简化您的代码,而且还会为您省去处理它的麻烦。
我开始意识到几乎任何控制器都可以避免使用TweenAnimationBuilder
小部件。
以下是如何使其适用于您的案例的示例:
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
_rotationAngle += pi;
print(_rotationAngle);
setState(() {
});
},
),
body: Center(
child: TweenAnimationBuilder(
duration: Duration(milliseconds: 300),
tween: Tween<double>(begin: 0, end: _rotationAngle),
builder: (BuildContext context, double value, Widget child) {
return Transform.rotate(
angle: value,
child: child,
);
},
child: Container(
height: 500,
width: 50,
color: Colors.redAccent,
),
),
),
);
推荐阅读
- mapbox - 如何按状态过滤功能
- python - 如何生成随机用户用户名并插入 django 中的数据库
- java - 如何从字符串资源文件一次设置风味版本代码和版本名称
- sql - 如何从巨大的 csv 文件中清除不良数据
- pandas - 如何在 matplotlib 的 set_xlim 中设置 'y > 0' 公式?
- python - pandas series.gt 如何使用
- java - 如何将 Python Script(py) 文件解析为 Java POJO?
- postgresql - Postgres - SQL 状态:EXECUTE 函数中的 22004
- scala - spark弹性搜索抛出403禁止错误
- javascript - 如何正确使用 Nuxt / Vue ...mapMutations