电动自行车设计

电动自行车设计 是一款电动自行车的控制中心应用程序。应用程序包含一个 标准 屏幕，用于显示速度表，一个 行程 屏幕，用于显示当前行程的统计信息，和一个 导航器 屏幕，用于显示地图。

行程和导航器屏幕显示一个可以选中的小动画速度表，用于将用户返回到标准屏幕。

在 Screen01.ui.qml 文件中，我们将屏幕按照从左到右的顺序排成一行：行程、标准、导航器。我们将使用 状态 在视图中显示适当的屏幕，并使用时间轴来动画化屏幕之间和屏幕上的 过渡。

使用时间线动画过渡

我们使用 时间线 视图来动画化 Screen01.ui.qml 中屏幕之间的过渡。

我们的视口包含1000帧，所以我们选择 "加号按钮" 给根组件添加一个5000帧的时间线。我们为所有其他字段使用默认值。

要开始录制标准屏幕与行程和导航器屏幕之间的过渡，我们在 导航器 视图中选择 screenCanvas。确认播放头在帧0，然后选择 (自动键（K）) 按钮（或按 k）。

在第0帧，我们在 属性 > 几何形状 - 2D > 位置 中将X坐标设置为0，以显示行程屏幕。然后我们将播放头移动到帧1000，并将X坐标设置为-1286以显示标准屏幕。然后我们继续移动播放头到帧2000，并将X坐标设置为-2560以显示导航器屏幕。在第3000帧，我们将X坐标恢复到-1268以便返回到标准屏幕。最后，在第4000帧，我们将X坐标设置回-19以便返回到行程屏幕。

当我们取消选择记录按钮停止记录时间轴时，新的时间轴会出现在视图中。

当我们选择导航器中的tripScreen时，我们可以在属性视图中看到可以进行动画的TripScreen组件的属性。

我们为缩放、可见性、透明度和当前帧属性设置值，以淡出当前屏幕并使速度表根据其当前位置的大小增加和减少。

有关使用时间轴的更多信息，请参阅创建时间轴动画。

使用状态在屏幕之间移动

我们使用状态视图来确定视口的内
容。动画在特定状态下运行或在从一
个状态移动到另一个状态时运行。

通过在Screen01.ui.qml中从视口
移动到视口并选择当适当的屏幕在视口中显示时在状态视图中选择创建新状态，我们为显示Trip、标准
和导航屏幕创建状态。

然后，我们为在屏幕之间移动时运行的动画创建状态：TripToStandard、StandardToNavigation、NavigationToStandard和StandardToTrip。

最后，我们创建用于放大和缩小速度计的状态：大、ToBig和FromBig。

然后，我们回到时间轴视图，并选择 "时间轴设置按钮"，打开时间轴设置对话框。我们选择添加按钮来为时间轴的每个部分创建动画。因此，每个动画的起始帧和结束帧很重要，而它们的持续时间则不是。

我们将转换到状态的起始帧和结束帧设置与我们在时间轴上设置的X坐标值相匹配。

在状态转换字段中，我们选择动画结束时切换到的状态。在对话框的下半部分，我们将没有动画的状态绑定到固定帧。