一、应用场景

时间轴动画组件常用于实现长图文的滑动场景，滑动距离的不同控制页面上的出现、消失及路径运动。可以实现如视差滚动、一镜到底、画中画、走马灯等交互效果，且不局限于横屏或竖屏的方向，支持手势滑动、自动播放和长按控制播放三种交互手势触发。

二、功能更新

已上线功能：

1、支持对滑动设置（横向滑动，滑动方向，滑动速度）；

2、支持关键帧设置（选择，高亮、删除）；

3、选择播放控制（自动，滑动，长按，循环）；

4、序列帧组件（帧率，循环次数，素材调整）；

5、支持画布缩放（可以使用快捷键操作）；

6、支持对时间轴缩放（可以使用快捷键操作）；

7、时间轴编辑器右侧面板功能（对齐，位置，锁定比列，文本，图层）；

8、左侧元素可以编辑打组（快捷键Ctrl+G）；

待上线功能（正在开发中）：

1、点击元素右键菜单（对齐功能，置于顶层/底层，隐藏元素）；

2、元素列表可以进行搜索；

3、合并时间轴下方元素轨道（多个元素处于同一轨道）；

4、页面尺寸强制横屏状态下，子元素触发器效果暂无反应；

版本权限：专业版及以上版本可正式用，所有用户可免费插入「样例」体验功能。

三、案例演示

我们通过一个 DEMO 案例来演示下 「 时间轴组件 」的效果

官网展示入口：https://www.epub360.com/manage/book/xlxp1s/present/

-

• 专业版/企业版免费拷贝地址：https://www.epub360.com/manage/book/ebjmpa/present/

• 非专业版/企业版单次购买使用地址：https://www.epub360.com/manage/book/bljc3l/application

以下是我们平台用户制作的时间轴H5案例：

《古今穿越奥运情》-羊城晚报

https://www.epub360.com/manage/book/fkm4ag/present/

《巴黎奥运会大点兵》-羊城晚报

https://www.epub360.com/manage/book/gerlwl/present/

《第十七条》-天津师范大学新闻传播学院广播电视学 团队作者：曹静仪 陈佳敏 董宇欣 指导老师：刘佳静

https://www.epub360.com/manage/book/pxwism/present/

《敦煌八景-千年律动》

https://www.epub360.com/manage/book/nya0no/present/

《毕节火焰盛会，等你加入！》-毕节日报融媒体中心

https://www.epub360.com/manage/book/ir1zuh/present/

《绿色设计余村行》

https://www.epub360.com/manage/book/djgdca/present/

《中国旅游日丨沿G331感受“吉致”风光！》-吉祥新闻

https://www.epub360.com/manage/book/u52h11/present/

四、视频教程

点击播放教程

五、组件说明

1、时间轴动画组件在工具栏一级菜单可添加，时间轴动画可以进入到编辑器里面对文字、图片以及序列帧的动态效果的展现。

2、点击时间轴动画组件之后，弹窗会出现样例作品展示，非专业版以上用户可以插入“样例案例”进行学习编辑体验，但不支持自行上传素材，也可以选择创建空白新的作品进行编辑。

3、创建新的时间轴动画组件后，在编辑器右边元素组件属性下方可以点击进入编辑时间轴动画。下方的播放设置提供多种方式进行选择播放，以及选择滑动的方向。

4、进入到时间轴动画组件编辑器页面后，看到中间有四个功能可以选择素材导入，点击文字可以输入文本段落，也可以选择单个图片进行上传，支持对GIF动图转化为序列帧，序列帧可以选择多个图片进行插入。

5、文本段落

（1）填写文本段落后可以看到下方的时间轴刻线以及右侧的编辑面板，右侧面板可以对其文本调整，字体样式、粗细程度、字号大小、字体颜色、对齐和装饰等功能，右侧面板下方计时功能分别是文本开始出现的时间以及总体持续时间。

（2）中间的播放按钮开始之后可以用“空格键”来暂停播放，左下方时间时间轴下面的黑色方块可以拉动来进行调整时间的长短，时间轴左侧的删除图标点击可以删除当前图层。

6、图片素材

（1）图片素材插入后，可以在右侧面板进行更换当前图片，其他功能与文本一致。

（2）左侧下拉框可调整图层混合模式，右侧可编辑图层的不透明度。

7、序列帧

（1）选择多张图片排好顺序选择插入，播放的时候按照插入的顺序进行轮播。

（2）插入序列帧效果之后，右侧编辑面板会发生更改，选择场景功能进行调整，第一个是帧率选择调整，帧率越小下面的持续时间越长，也就是跳动的频率变小，帧率越大持续时间就越短。  

（3）第二个是循环次数，循环次数越大，下方的持续时间也随之增长，反之次数越小，时间变短，时间轴下方的黑色黑色方块则不可以进行拉动，总持续时间则由帧率大小和循环次数来计算。

（4）右侧面板可以对序列帧的素材进行调整，对全部素材可以重新排序，点击右侧按钮进行正序以及反序，也可以选中某个素材点击鼠标进行拖动到替换的位置，“+”可以增加新的元素，每个元素的“-”可以删除当前行元素，编辑这些完成之后点击右上角“返回编辑器”按钮则可回到编辑器页面。

（5）左侧素材偏多可以进行编组【快捷键：ctrl(windows)/command(mac)】，按住“shift”选中元素然后编组，鼠标双击组名可以更改组的名字，点击三角图标可以对组进行展开和收缩。

8、GIF动图

（1）选择已经上传好的GIF动图，进行添加到时间轴编辑器。

（2）上传GIF动图成功之后在右侧编辑面板查看，会对GIF动图进行序列帧拆分，支持对生成的序列帧编辑调整。

9、当时间轴组件资源面板与时间轴上的两个组，用户任意展开一个组，另一个组同步展开，选中两者任何一个元素时，也自动定位到另外一个组上的相同元素上，以方便能够准确定位目标的图层。

10、编辑器

（1）返回编辑器之后支持对时间轴组件的子元素进行添加触发器，选中子元素在元素的关键节点添加触发器行为。

（2）也支持给时间轴添加动画，选择进行加入。

六、快捷键