《iH5高级教程H5交互菜单,3D时间轴特效.docx》由会员分享，可在线阅读，更多相关《iH5高级教程H5交互菜单,3D时间轴特效.docx（6页珍藏版）》请在三一办公上搜索。
1、iH5高级教程H5交互菜单,3D时间轴特效iH5高级教程：H5交互菜单，3D时间轴特效 在时间轴上的素材呈现3D的效果，手指在屏幕上滑动的过程中，图片以3D翻转的形式运动，超过屏幕或没有运动到屏幕中间的图片都是折叠的形式。下面我们讲述一下在案例中的3D时间轴动画。 第一步： 1、选中舞台，点击工具栏下的页面工具，添加一个页面。 2、选中页面，点击工具栏下的滑动时间轴工具，在舞台上画一个框，添加一个与舞台一样大的滑动时间轴。滑动时间轴的总时长设置为10秒，滑动方向为上 3、选中滑动时间轴，点击工具栏的下的透明按钮工具一个透明按钮，右击透明按钮对象，命名为容器。 ，在舞台上画出一个矩形，添加4、选
2、中容器透明按钮，点击工具栏下的图片工具，在舞台里画出一个矩形，添加一张高度为3425的时间线图片，右击图片对象，命名为背景一线。 5、选中容器透明按钮，点击工具栏下的轨迹工具名为辅助轨迹。 ，添加一个轨迹，右击轨迹对象，命6、选中背景一线图片对象，点击工具栏下的轨迹工具，添加一个轨迹。 7、选中背景一线图片对象，点击工具栏下的图片工具一张八月的图片。 8、选中八月的图片，点击工具栏下的文本工具本对象。 ，在舞台中画出一个矩形，添加两个文，在舞台上画出一个矩形，添加第二步： 1、选中八月的图片，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为3D旋转父
3、对象。 2、选中八月的图片，点击工具栏下的轨迹工具，添加一个轨迹。 3、选中3D旋转父对象透明按钮，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为3D对象。设置的X轴旋转角度为-45 4、选中3D对象透明按钮，点击工具栏下的图片工具一张图片。 ，在舞台上画出一个矩形，添加5、选中3D对象透明按钮，点击工具栏下的轨迹工具6、选中图1，点击工具栏下的事件工具的图片跳转到相应的介绍页面。 ，添加一个事件。事件的属性是通过点击相应，添加一个轨迹。 第三步： 1、在滑动时间轴的轨迹里，背景一线的轨迹在0秒和10秒的时候各设置一个关键帧。 0秒的关键帧坐标为
4、2、第10秒的关键帧坐标为 3、可以以相同的步骤设置其他十一个月份的图片属性 第四步： 在案例里，以六月的图片对象作为例子进行说明。 1、六月的图片对象在滑动时间轴里有两个轨迹，分别是Jun图片轨迹和3D对象透明按钮轨迹。 2、在0秒的时候，Jun图片对象处于舞台的坐标处，点击Add按钮这里设置一个关键帧。 ，在3、在0.8秒的时候，Jun图片对象往上移动，处于舞台坐标为的位置，点击Add按钮，在这里设置一个关键帧。 轨迹的自动播完属性设置为NO 4、对于3D对象透明按钮的轨迹，在0秒的时候，3D对象透明按钮在舞台的位置，点击Add按钮，在这里设置一个关键帧。 5、在0.8秒的时候，3D对象透
5、明按钮，处于舞台的位置，点击Add按钮在这里再设置一个关键帧。 ，6、在1.95秒的时候，3D对象透明按钮需要在X轴上旋转-45度，所以在X轴旋转中设置-457、在“容器”透明按钮中，有一个辅助轨迹，它的自动播完属性设置为NO上面有11个关键帧 8、它是用来固定每张图片的状态，可以方便其他轨迹可以完成一些相对复杂的状态。案例里用11个关键帧作为每张图片翻转前的一个参照点。就是说关键帧上的每个张图都是X轴旋转为0的，例如第一个关键帧和第二个关键帧， 9、第一个关键帧七月图的X轴旋转为0 10、第二个关键帧六月图的X轴旋转为0。 在编辑其他月份的图片时，需要按照合适的距离排布在“容器”透明按钮里，
6、在所对应的轨迹上设置关键帧，使得每张图片划过屏幕中间的时候，以X轴为中心旋转-45度角。 第五步： 给每张图添加一个二级页面，在点击每张图片的时候，都会跳转到相应的页面介绍。 1、选中舞台，点击工具栏下的页面工具2、选中页面2，点击工具栏下的图片工具片，右击图片对象，命名为大图1。 ，在舞台上画出一个矩形，添加一张背景图，添加一个页面。 3、选中大图1对象，点击工具栏下的图片工具片对象，右击图片对象，重命名为返回按钮。 ，在舞台上画出一个矩形，添加一个图4、选中返回按钮图片对象，点击工具栏下的事件工具置为点击触发页面的跳转。 ，添加一个事件。事件的属性设5、在案例中的页面3到页面13都是以页面
7、2同样的方式和步骤进行设置，在每个返回按钮图片上所设置的跳转事件都是跳转到页面1的界面上。在每张图片的点击事件中，要注意点击跳转的页面是否跟跳转后的页面介绍内容相符合。 先行知识： 1、滑动时间轴的应用 2、初级教学篇中的技巧1-辅助轨迹案例 重点工具： 滑动时间轴、轨迹、辅助轨迹、透明按钮、视距、X轴旋转 知识点： 1.滑动时间轴的“自动跳转控制点”属性设为是，轨迹的“自动播完”属性也设为是，那么滑动时间轴自动跳转时，将忽略此轨迹上的所有控制点；换一句话说，当滑动时间轴下的运动轨迹设为自动播完时，滑动时间轴播放过程中，不会在该运动轨迹的任何一个控制点上暂停，此运动轨迹可以仅做设定对象运动轨迹使用，不影响滑动时间轴的跳转；自动播完选项仅对滑动时间轴有效，对时间轴无效。 2、轻触：用法与点击、手指按下相同，但是轻触动作可以与“手指按下”或“点击”的动作同时触发。当你使用滑动时间轴和面板的时候，对对象有点击的效果时，务必选择轻触，否则会引起冲突或功能失效。 相关事件： 触发对象：图片 触发条件：轻触手机 目标对象：舞台 目标动作：跳转页面 页面：舞台页面2 触发对象：返回按钮， 触发条件：手指按下 按下时间：0 目标对象：舞台 目标动作：跳转页面 页面：舞台页面1
