iH5高级教程:H5交互菜单,3D时间轴特效

 时间:2024-10-20 05:35:24

在时间轴上的素材呈现3D的效果,手指在屏幕上滑动的过程中,图片以3D翻转的形式运动,超过屏幕或没有运动到屏幕中间的图片都是折叠的形式。下面我们讲述一下在案例中的3D时间轴动画。

工具/原料

iH5

方法/步骤

1、选中舞台,点击工具栏下的页面工具,添加一个页面。选中页面,点击工具栏下的滑动时间轴工具,在舞台上画一个框,添加一个与舞台一样大的滑动时间轴。滑动时间轴的总时长设置为10秒,滑动方向为上选中滑动时间轴,点击工具栏的下的透明按钮工具,在舞台上画出一个矩形,添加一个透明按钮,右击透明按钮对象,命名为容器。选中容器透明按钮,点击工具栏下的图片工具,在舞台里画出一个矩形,添加一张高度为3425的时间线图片,右击图片对象,命名为背景一线。选中容器透明按钮,点击工具栏下的轨迹工具,添加一个轨迹,右击轨迹对象,命名为辅助轨迹。选中背景一线图片对象,点击工具栏下的轨迹工具,添加一个轨迹。选中背景一线图片对象,点击工具栏下的图片工具,在舞台上画出一个矩形,添加一张八月的图片。选中八月的图片,点击工具栏下的文本工具,在舞台中画出一个矩形,添加两个文本对象。

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

2、选中八月的图片,点击工具栏下的透明按钮工具,在舞台上画出一个矩形,添加一个透明按钮,右击透明按钮对象,命名为3D旋转父对象。选中八月的图片,点击工具栏下的轨迹工具,添加一个轨迹。选中3D旋转父对象透明按钮,点击工具栏下的透明按钮工具,在舞台上画出一个矩形,添加一个透明按钮,右击透明按钮对象,命名为3D对象。设置的X轴旋转角度为-45选中3D对象透明按钮,点击工具栏下的图片工具,在舞台上画出一个矩形,添加一张图片。选中3D对象透明按钮,点击工具栏下的轨迹工具,添加一个轨迹。选中图1,点击工具栏下的事件工具,添加一个事件。事件的属性是通过点击相应的图片跳转到相应的介绍页面。

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

3、在滑动时间轴的轨迹里,背景一线的轨迹在0秒和10秒的时候各设置一个关键帧。0秒的关键帧坐标为(0,0)第10秒的关键帧坐标为(0,-2390)可以以相同的步骤设置其他十一个月份的图片属性

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

4、在案例里,以六月的图片对象作为例子进行说明。六月的图片对象在滑动时间轴里有两个羌礤掘暑轨迹,分别是Jun图片轨迹和3D对象透明按钮轨迹。在0秒的时候,Jun图片对象处于舞台的坐标叵萤茆暴(20,730)处,点击Add按钮,在这里设置一个关键帧。在0.8秒的时候,Jun图片对象往上移动,处于舞台坐标为(20,640)的位置,点击Add按钮,在这里设置一个关键帧。轨迹的自动播完属性设置为NO对于3D对象透明按钮的轨迹,在0秒的时候,3D对象透明按钮在舞台(36,-125)的位置,点击Add按钮,在这里设置一个关键帧。在0.8秒的时候,3D对象透明按钮,处于舞台(36,-125)的位置,点击Add按钮,在这里再设置一个关键帧。在1.95秒的时候,3D对象透明按钮需要在X轴上旋转-45度,所以在X轴旋转中设置-45在“容器”透明按钮中,有一个辅助轨迹,它的自动播完属性设置为NO上面有11个关键帧它是用来固定每张图片的状态,可以方便其他轨迹可以完成一些相对复杂的状态。案例里用11个关键帧作为每张图片翻转前的一个参照点。就是说关键帧上的每个张图都是X轴旋转为0的,例如第一个关键帧和第二个关键帧,第一个关键帧七月图的X轴旋转为0第二个关键帧六月图的X轴旋转为0。在编辑其他月份的图片时,需要按照合适的距离排布在“容器”透明按钮里,在所对应的轨迹上设置关键帧,使得每张图片划过屏幕中间的时候,以X轴为中心旋转-45度角。

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

5、给每张图添加一个二级页面,在点击每张图片的时候,都会跳转到相应的页面介绍。选中舞台,点击工具栏下的页面工具,添加一个页面。选中页面2,点击工具栏下的图片工具,在舞台上画出一个矩形,添加一张背景图片,右击图片对象,命名为大图1。选中大图1对象,点击工具栏下的图片工具,在舞台上画出一个矩形,添加一个图片对象,右击图片对象,重命名为返回按钮。选中返回按钮图片对象,点击工具栏下的事件工具,添加一个事件。事件的属性设置为点击触发页面的跳转。在案例中的页面3到页面13都是以页面2同样的方式和步骤进行设置,在每个返回按钮图片上所设置的跳转事件都是跳转到页面1的界面上。在每张图片的点击事件中,要注意点击跳转的页面是否跟跳转后的页面介绍内容相符合。

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

iH5高级教程:H5交互菜单,3D时间轴特效

6、先行知识:滑动时间轴的应用初级教学篇中的技颢属装嗟巧1-辅助轨迹案例重点工具:滑动时间轴、轨迹、辅助轨迹、透明按钮、视距、X轴旋转知识点:1.滑动时间轴的“自动跳转控制点”属性滤鲇魍童设为是,轨迹的“自动播完”属性也设为是,那么滑动时间轴自动跳转时,将忽略此轨迹上的所有控制点;换一句话说,当滑动时间轴下的运动轨迹设为自动播完时,滑动时间轴播放过程中,不会在该运动轨迹的任何一个控制点上暂停,此运动轨迹可以仅做设定对象运动轨迹使用,不影响滑动时间轴的跳转;自动播完选项仅对滑动时间轴有效,对时间轴无效。轻触:用法与点击、手指按下相同,但是轻触动作可以与“手指按下”或“点击”的动作同时触发。当你使用滑动时间轴和面板的时候,对对象有点击的效果时,务必选择轻触,否则会引起冲突或功能失效。相关事件:触发对象:图片触发条件:轻触手机目标对象:舞台目标动作:跳转页面页面:舞台·页面2触发对象:返回按钮,触发条件:手指按下按下时间:0目标对象:舞台目标动作:跳转页面页面:舞台·页面1

iH5高级教程:3D翻书特效 ih5怎样在场景中添加动态字幕 iH5中级教程:微场景H5必备,下拉画轴效果 ih5触发器如何使用 iH5怎么制作上传图片功能
热门搜索
蕉太狼图片 生日蛋糕的图片 怎么制作图片 在线看漫画 幼儿园墙面布置图片