颤振:从当前物体位置重新启动SlideAnimation
问题描述:
我有一个SlideAnimation
上的对象,每当我点击屏幕时触发一个对象。物体只是向上滑动,但当我再次点击屏幕时,动画将再次从对象的原始位置开始。我将如何捕获对象在最后一个动画中结束的位置并从那里执行动画?
我已经得到了SlideTransition的创建下面的代码:颤振:从当前物体位置重新启动SlideAnimation
new SlideTransition(
child: new Container(
child: char,
),
position: _characterPosition,
)
而且此代码为实际动画:
_characterPosition = new FractionalOffsetTween(
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(0.0, -0.2),
).animate(new CurvedAnimation(
parent: _characterAnimationController,
curve: Curves.easeOut,
)
);
答
在最简单的情况下,你可以使用你的_characterAnimationController
。 AnimationController有两种相关的方法stop和forward。验证当前动画的状态,并调用所需的方法:
void _onTap() {
if (_characterAnimationController.isAnimating) {
_characterAnimationController.stop(canceled: false);
} else {
_characterAnimationController.forward();
}
}
要在完成后,延长的动画,您可以通过重置value
状态_characterAnimationController
(或创建新的)和更新位置。完整示例:
class Home extends StatefulWidget {
@override
State createState() => new _HomeState();
}
class _HomeState extends State<Home> with TickerProviderStateMixin {
Animation _characterPosition;
AnimationController _characterAnimationController;
FractionalOffset _beginOffset;
FractionalOffset _endOffset;
FractionalOffset _animationOffset;
void _restartAnimation() {
_characterAnimationController.value = 0.0;
_beginOffset = _endOffset;
_endOffset = _endOffset + _animationOffset;
setState(() {
_characterPosition = _generateCharacterPosition();
});
_characterAnimationController.forward();
}
@override
void initState() {
_animationOffset = const FractionalOffset(0.0, 0.15);
_beginOffset = const FractionalOffset(0.0, 0.0);
_endOffset = _animationOffset;
_characterAnimationController = new AnimationController(
duration: new Duration(seconds: 5), vsync: this);
_characterPosition = _generateCharacterPosition();
}
@override
Widget build(BuildContext context) {
return new Material(
child: new InkWell(
child: new SlideTransition(
child: new Container(
child: new Text("Hello"),
),
position: _characterPosition,
),
onTap: _onTap,
),
);
}
void _onTap() {
if (_characterAnimationController.isAnimating) {
_characterAnimationController.stop(canceled: false);
} else if (_characterAnimationController.status ==
AnimationStatus.completed) {
_restartAnimation();
} else {
_characterAnimationController.forward();
}
}
Animation _generateCharacterPosition() => new FractionalOffsetTween(
begin: _beginOffset,
end: _endOffset,
)
.animate(new CurvedAnimation(
parent: _characterAnimationController,
curve: Curves.easeOut,
));
}
这适用于动画未完成时的情况。但一旦完成并且您再次点击屏幕,动画将再次从原始位置开始。任何其他想法? –
动画完成后您想要什么行为,然后再次点击?你能举一些例子吗? – Mogol
当然,可能我不好解释它不够好,但: 我想能够开始一个动画,一旦它停止(或者因为它停止或它完成)我想再次抵消对象动画,但从它刚刚动画到的新位置。 –