产品开发实录(2)——打造时间轴

概述

时间轴在课件工具的主要作用：

• 便于查看、编辑页面各个元件的播放顺序(音频同步)，播放时长，对页面播放效果有整体的了解。
• 便于查看页面各个元件的层次顺序。
• 便于选择页面元件，可以避免由于层次遮挡而无法选择较下层的元件，另外在工作区隐藏的元件，通过时间轴选中隐藏的元件，再编辑其显示状态。
• 能够实时播放选中的元件，显示播放进度，并且播放过程中能够设下播放标记(Marker)，以便实现音频同步时进行对位。

开发实录

决定时间轴面板放置的位置，面板顶部放置时间轴标尺，左上角放置组合框控制时间轴显示比例，右边放置垂直滚动条，右下方放置水平滚动条，左下方能够腾出空间放置一些操作按钮和文本标签等。这样，时间轴的轮廓基本定好了。

现在开始设计时间轴的子项，先实现时间轴子项的绘制，背景刻度与标尺保持一直，子项垂直按一定顺序排列。

实现时间轴子项的头效果，子项头由【操作按钮】+【图标】+【类别标签】组成，现在多了些图标和文字，效果不错吧。

在时间轴子项里添加滑块，用于显示子项对应的页面元件的播放顺序，播放时长等信息。滑块由【背景色块】+【名称标签】组成，用滑块的位置表示播放顺序，色块长度表示播放时长。

现在实现时间轴子项的选择效果，选择控制是制作时间轴的其中一个难点，要支持多选，和工作区进行选择同步、操作同步等，有许多细节的操作要考虑，例如，工作区添加、删除元件，编辑元件名称，Undo/Redo等。

实现时间轴子项滑块的拖放操作，支持多选时拖放，支持拖放的Undo/Redo等。面板左下方添加【录音】、【播放】、【暂停】、【标记】、【取消标记】、【元件路径标签】界面元素。

实现时间轴播放功能，显示播放进度，并实现添加/取消播放标记等功能，这样时间轴模块功能基本完成了。

总结

该文是一个产品模块的开发记录，其中的设计思路(界面设计，功能设计，开发流程等)能作参考，举一反三。由于关注的粒度不同，这里的焦点是一个模块，所以不会给出具体一行行的代码。