iH5高级教程H5交互菜单下拉菜单特效.docx

iH5高级教程H5交互菜单下拉菜单特效.docx

《iH5高级教程H5交互菜单下拉菜单特效.docx》由会员分享，可在线阅读，更多相关《iH5高级教程H5交互菜单下拉菜单特效.docx（18页珍藏版）》请在冰豆网上搜索。

iH5高级教程H5交互菜单下拉菜单特效

iH5高级教程：

H5交互菜单，下拉菜单特效

下拉菜单的三种不同效果。

第一步：

1、选中舞台，点击页面工具

，添加3个页面，每个页面制作不同的下拉菜单效果。

第二步：

1、选中页面1，点击时间轴工具

。

总时长0.4秒，自动播放和循环播放为NO。

2、选中时间轴，点击透明按钮工具

，重命名为内容。

3、选中内容透明按钮，点击轨迹工具

，添加轨迹。

点ADD添加关键帧，制作蓝色透明按钮往右移动的效果。

4、选中内容，点击透明按钮工具

，添加3个透明按钮，重命名为按钮、内容、横栏。

5、选中按钮透明按钮，点击时间轴工具

，制作开关动画。

6、选中时间轴，点击图片工具

，上传背景图片。

选中图片，点击轨迹工具，制作背景往右移动的效果。

7、选中时间轴，点击透明按钮工具

，重命名为目录。

制作目录往右移动的效果。

8、选中目录，点击中文字体工具

，添加5个中文字体，并制作中文字体阶梯出现的效果。

9、选中按钮，点击计数器

，在舞台上画一个框，添加计数器。

10、点击透明按钮，在按钮图片处画一个框，选中透明按钮，添加事件工具

，手指按下按钮，计数器加1。

11、选中计数器添加4个事件

。

计数器为奇数，菜单往右移动，按钮时间轴正向播放，变成叉号。

计数器为偶数时，菜单往左移动，按钮变成三行。

第三步：

1、页面2其他设置与页面1相同，下拉菜单的形式变成圆形。

选中页面2，点击时间轴工具

，添加时间轴。

制作圆形慢慢放大的效果。

舞台、页面属性面板剪切选NO，就可以看到舞台外的图片。

第一个关键帧：

中间环节：

第二个关键帧：

2、选中时间轴，点击透明按钮工具

，添加透明按钮。

3、选中透明按钮，点击中文字体

，添加5个中文字体。

选中中文字体，添加轨迹。

第四步：

1、选中页面3，点击时间轴工具

，选中时间轴，点击透明按钮工具，添加2个透明按钮。

选中透明按钮，点击轨迹

。

透明按钮1负责从显示到隐藏。

透明按钮3显示文字。

2、选中透明按钮3，点击中文字体工具

，添加5个中文字体。

3、选中中文字体，点击动效工具

，为5个中文字体各添加1个动效。

触发后延时分别为0、0.05、0.1、0.15、0.2。

先行知识：

时间轴、轨迹、事件

重点控件：

时间轴、轨迹、透明按钮、计数器、事件、剪切

重点事件：

触发对象：

按钮

触发条件：

手指按下

目标对象：

计数器

目标动作：

加1

触发对象：

计数器

触发条件：

为奇数

目标对象：

时间轴

目标动作：

从头播放

触发对象：

计数器

触发条件：

为偶数

目标对象：

时间轴

目标动作：

反向播放

TIPS：

1、舞台剪切选择YES，会剪切掉舞台范围外的子对象。

此案例中可以制作圆圈放大的效果。

2、通过计数器的奇偶数，使目录时间轴播放与反向播放，同理，可以制作控制音乐开关。

（注：

可编辑下载，若有不当之处，请指正，谢谢!

）