iH5高级教程:H5交互菜单,流动的按钮特效

 时间:2024-09-23 04:19:38

向上滑动页面翻页,上面的图片向上缩小,下面的图片向上切换出来,同时,流动按钮“加号”会移动位置,点开移动按钮会出一张围巾的小图,小图与模特身上的围巾是对应的,点击小图,还可以跳转到店铺。

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

工具/原料

iH5

方法/步骤

1、选中舞台,点击页面工具,添加一个页面。选中页面点击滑动时间轴工具,在舞台上画一个与舞台一样大的框,添加滑动时间轴。选中滑动时间轴,点击图片工具,添加10张图片做子对象。

iH5高级教程:H5交互菜单,流动的按钮特效

2、1.訇咀喃谆将页面的属性面板,剪切设为NO,就可以看到舞台外的图片。2.第一张图第一个关键点,XY坐标是(0,0),大小是640*1008,也。就是刚好放满舞台,。第二个关键点,,图渔镭沃昏片在舞台上方,大小也改变了。数值可以参考截图。3.第二张图第一个关键点,XY坐标是(0,1008),大小是640*1008,放在舞台下面,第二个关键点,图片在舞台上,大小还是满屏,第三个关键点,图片在舞台上方,并且缩小了。数值可以参考截图。其余图片也是同样的设置。

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

3、1.选中滑动时间轴,点击透明按钮工具,在舞台上画一个框,添加一个透明按钮作为容器,为容器添加一个轨迹。这个图片的轨迹就是移动到啊每一页的围巾下方。2.容器下添加一个时间轴,时间轴下添加“加号”的图片,图片下添加轨迹。加号这个图片会明暗变化,提示用户去点击。

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

4、在滑动时间轴下添加一个围巾的容器(可以是透明按钮,也可以是空的图片),容器下加10张小图。为每一张小图,添加轨迹与关键点,设置关键点,让小图会跟着大图运动与缩小。

iH5高级教程:H5交互菜单,流动的按钮特效

5、1.选中舞台,点击计数器工具,添加一个计数器。选中流动按钮里的加号图片,点击事件工具,添加一个事件,点击加号图片,计数器加1,实现点击同一物体出现不同效果。计数器初始值为0,计数器下添加4个事件。2.当计数器是奇数时(点击1次),旋转45度,加号变成叉号。但计数器是偶数时(点击2次),旋转角,。度为0,图片回到加号状态。3.当计数器是奇数时(点击1次),滑动时间轴里的围巾小图父对象,显示。但计数器是偶数时(点击2次),围巾小图隐藏。

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

iH5高级教程:H5交互菜单,流动的按钮特效

6、先行知识:滑动时间轴、事件重点控件:滑动时间轴、事竭惮蚕斗件、计数器、旋转知识点:滑动时间轴下控制10张人物图片,坛冰核哧除第一张与最后一张外,每张图片3个关键帧,第一个关键帧图片在舞台下方,第二个关键帧图片占满舞台,第三个关键帧图片缩小并处于舞台上方,控制图片从下往上显示,然后缩小离开舞台。滑动时间轴下有一个围巾空图片父对象,下面有10张围巾子对象,围巾跟随对应的人物图片运动,点击流动按钮显示围巾父对象,则带动显示对应的围巾子对象。滑动时间轴下添加流动按钮空图片,流动按钮下添加轨迹,轨迹里添加10个关键帧,控制流动按钮的运动,流动按钮下添加时间轴,时间轴下添加按钮图片,时间轴控制按钮透明度,使之闪烁,吸引人点击。重点事件:触发对象:按钮图片触发条件:点击目标对象:计数器目标动作:加1触发对象:计数器触发条件:为奇数目标对象:流动按钮目标动作:设置属性,旋转0度触发对象:计数器触发条件:为偶数目标对象:流动按钮目标动作:设置属性,旋转45度触发对象:计数器触发条件:为奇数目标对象:围巾目标动作:显示触发对象:计数器触发条件:为偶数目标对象:围巾目标动作:隐藏

iH5怎么设置自动翻页 iH5基础教程:添加H5页面、翻页特效 iH5基础教程:为H5添加事件、动效 iH5基础教程:为H5添加事件、动效 iH5高级教程:H5交互进阶,打字机效果
热门搜索
空气污染图片 邪恶漫画视频 衣服图片简笔画 淘宝图片空间 新网王漫画