ih5 里面的滑动时间轴是核心交互组件，它可以把页面滑动动作和时间轴动画绑定，用户滑动屏幕的时候，时间轴会跟随滑动进度前进或者后退，实现随滑随动的动态效果，和普通自动播放时间轴不一样，普通时间轴是按时间自动播放，滑动时间轴是由用户手势滑动来控制动画进程，很多 H5 作品里面的长卷展开 物体随滑动变形 分镜切换 滚动视差效果，都是依靠滑动时间轴完成，新手经常出现滑动没有响应 动画跳变 进度错位的问题，大多是没有正确绑定触发对象，时间轴关键帧设置错误，或者页面滚动容器选择不对，掌握组件添加 关键帧制作 滑动参数绑定这套流程，就可以独立做出这类交互式 H5 动画。
基础原理说明
滑动时间轴的核心逻辑是建立滑动距离和时间轴播放进度的映射关系，页面产生滑动位移，会转化成时间轴的百分比进度，滑动距离越大，时间轴播放进度越高，用户反向回滑，时间轴就会倒退回之前的关键帧位置，支持正向滑动推进，也支持反向回退，适合长页面沉浸式叙事类 H5 项目。
添加滑动时间轴操作步骤
第一步 打开 ih5 编辑器，新建或者打开已经做好的 H5 项目，确认页面已经设置好滚动长页面
第二步 在左侧组件库，找到时间轴相关组件，选择滑动时间轴，把组件添加到画布对应的页面层级
第三步 选中这个滑动时间轴组件，在右侧属性面板，设置总时长 起止进度 滑动方向，区分是向上滑动触发还是向下滑动触发
第四步 双击打开时间轴编辑面板，在时间轨道上添加关键帧，选中需要做动画的元素，在不同进度点设置元素的位置 透明度 缩放 旋转等属性变化
第五步 完成关键帧之后，回到主页面，绑定滑动触发容器，也就是指定是哪个长页面滚动来驱动这个滑动时间轴
第六步 点击预览，测试滑动屏幕，查看动画是否跟随滑动流畅变化，调试关键帧间距和滑动灵敏度
关键参数设置说明
滑动方向 一般选择纵向滑动，也就是上下滚动页面触发，少数项目可以设置横向滑动，适配左右翻长卷效果
进度区间 默认是 0 到 100，代表滑动从头到尾完整播放整套动画，也可以单独截取部分进度区间，只在一段滑动距离内播放动画
缓动效果 可以给关键帧之间添加缓动，让动画变化更加顺滑，不会生硬匀速跳变
元素层级 做动画的元素必须放在时间轴可控制的层级里面，如果元素放在独立弹窗或者跨页面，滑动时间轴无法控制
进阶应用场景清单
长画卷滚动展开效果
随滑动逐帧切换分镜故事
物体形变 旋转 渐显渐隐
视差多层背景不同速度滚动
滚动到指定位置触发文字弹出
常见问题排查清单
1 滑动没有反应 检查滑动时间轴有没有正确绑定滚动容器，页面是否开启长页面滚动属性
2 动画跳帧 关键帧数值设置突变，需要调整关键帧属性，增加过渡
3 回滑动画不倒退 确认组件属性开启反向回退，部分默认只支持正向推进
4 预览正常发布之后失效 检查元素命名 层级是否改动，组件是否被隐藏或者锁定
5 动画跟手延迟 降低关键帧数量，优化元素素材体积，减少页面加载压力
参数对照表
项目 说明
普通时间轴 按时间自动播放
滑动时间轴 滑动手势控制进度
触发方式 纵向滚动 横向滚动
核心控制 属性 位置 透明度 缩放 旋转
【常见问题】
问题 1 ih5 滑动时间轴怎么用 能不能实现反向回滑动画倒退
回答 1 ih5 滑动时间轴怎么用，只要在组件属性里面开启反向回退功能，用户往回滑动的时候，时间轴就会按照进度倒回，动画同步倒退，适合长页面叙事类 H5，如果没有开启该选项，滑动时间轴只会单向向前播放。
问题 2 ih5 滑动时间轴怎么用 和普通时间轴有什么区别
回答 2 ih5 滑动时间轴怎么用，它和普通时间轴最大区别是驱动方式，普通时间轴依靠时间自动播放，滑动时间轴依靠用户滑动位移驱动进度，动画跟随手势变化，不需要固定播放时长，是交互式滚动动画专用组件。
问题 3 ih5 滑动时间轴怎么用 预览正常发布之后动画失效怎么办
回答 3 ih5 滑动时间轴怎么用，发布之后失效一般是层级变动 元素被锁定，或者滚动容器绑定丢失，需要重新进入编辑器，重新绑定滑动触发容器，核对所有关键帧对应的元素是否还存在，优化素材之后重新发布测试。
【免责申明】
本文内容仅为 ih5 编辑器滑动时间轴操作教学，不同版本编辑器界面和功能存在差异，操作请以当前官方版本为准，本文不承担因为项目制作出错造成的相关损失。