Tween动画颤动

Question

我想在单击按钮时播放动画。在第一次按下时，小部件旋转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();
}

Answer 1

如果您只想旋转一个小部件，我建议您避免使用控制器。这不仅可以简化你的代码，还可以省去处理代码的麻烦

我已经意识到，几乎任何控制器都可以避免使用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,
),
),
),
);

Answer 2

只需替换

else {tapValue--;
animController.forward();
}

至

else {tapValue--;
animController.reverce();
}