los*_*aby 6 animation flutter flutter-positioned
我试图学习在Flutter中使用具有Stack和PositionedTransitions的动画,并为此制作了一个基于精灵的简单游戏。目前,我的精灵显示在动画的结束位置,而不是开始处,然后滑动到结束位置。
我的代码如下所示:
if (lamb != null) {
beginTop = ((lamb.lastY - 1) * roomLength) + lamb.lastY;
beginLeft = ((lamb.lastX - 1) * roomLength) + lamb.lastX;
endTop = ((lamb.y - 1) * roomLength) + lamb.y;
endLeft = ((lamb.x - 1) * roomLength) + lamb.x;
layerAnimation = RelativeRectTween(
begin: RelativeRect.fromLTRB(beginLeft, beginTop, 0.0, 0.0),
end: RelativeRect.fromLTRB(endLeft, endTop, 0.0, 0.0),
).animate(_controller.view);
return PositionedTransition(
rect: layerAnimation,
child: Text(
lamb.emoji,
style: TextStyle(color: Colors.black, fontSize: roomLength - 12),
),
);
}
Run Code Online (Sandbox Code Playgroud)
我应该在_controller.forward()某个地方打个电话吗?何时何地?屏幕上最多有10个动画小部件同时使用同一_controller,所有小部件必须同时滑动。
谢谢
PS:以下代码,而不是PositionedTransition内容,似乎朝着正确的方向发展:
return AnimatedPositioned(
left: endLeft,
top: endTop,
duration: Duration(milliseconds: 900),
child: Text(
widget.maze.minotaur.emoji,
style: TextStyle(color: Colors.black, fontSize: roomLength),
),
);
Run Code Online (Sandbox Code Playgroud)
但是,我不知道如何指定动画的起点-它似乎在正确的位置结束,有时在正确的位置开始,但是如何强制它在正确的位置开始?我猜想是“补间”,但是如果是这样,我不确定如何将其连接起来。或通过添加这样的键,到目前为止似乎有所帮助:
return AnimatedPositioned(
key: Key('uniquekey'),
left: endLeft,
top: endTop,
curve: Curves.linear,
duration: Duration(milliseconds: 900),
child: Text(
widget.maze.minotaur.emoji,
style: TextStyle(color: Colors.black, fontSize: roomLength),
),
);
}
Run Code Online (Sandbox Code Playgroud)
添加像这样的键,似乎是 API 问题的答案,该键告诉 flutter 哪个 AnimatedPositioned 小部件在更新之间是哪个,这样它就可以知道每个部件在哪里开始其旅程,没有它每个更新时每个部件都是新的,而旧的部件是消失了,所以没有可以使用的起始位置:
return AnimatedPositioned(
key: Key('uniquekey'),
left: endLeft,
top: endTop,
curve: Curves.linear,
duration: Duration(milliseconds: 900),
child: Text(
widget.maze.minotaur.emoji,
style: TextStyle(color: Colors.black, fontSize: roomLength),
),
);
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
140 次 |
| 最近记录: |