Html5页面交互动画的行为触发事件功能

 时间:2024-11-10 19:55:26

H5移动端的各种交互动画、游戏已经应用的越来越广,在各种平台上不断出现,对于体验上的要求也越来越高,嘿,那我们来看看常用的几种行为触发方式。这里我们用到的是Mugeda在线工具。

工具/原料

在线工具

方法/步骤

1、首先进入工具的创建界面

Html5页面交互动画的行为触发事件功能

2、打开后对于添加图片,动画效果等等这里就不讲了,主要分步讲下行为触发方面。先来讲一下【拖动/转动结束】指的是对添加行为的物体拖动或转动结束后触发行为。

Html5页面交互动画的行为触发事件功能

3、首先把物体的【拖动/旋转】属性设为【自由拖动】,然后添加【播放】行为,【触发事件】选为【拖动/转动结束】。动画预览是拖动该物体,当拖动停止时,会触发【播放】行为,帧号会变化。

Html5页面交互动画的行为触发事件功能

4、【拖动物体放下】,指的是A物体拖动到B物体内部时触发加在B物体上的行为的触发事件。

Html5页面交互动画的行为触发事件功能

5、给红色物体命名为“a”,并设置其【拖动/旋转】属性设僭轿魍儿为【自由拖动】,蓝色物体添加【播放】行为,【触发事件】选为【拖动物抄荛挝毳体放下】,行为属性设置中选【拖动物体名称】为“a”。预览时,拖动红色物体到蓝色物体内,当其进入蓝色物体内时,会触发【播放】行为,帧号会变化。

Html5页面交互动画的行为触发事件功能

6、【拖动物体离开】,指的是将A物体从B物体内部拖动到B物体外部时,会触发加在B物体上的行为的触发事件。

Html5页面交互动画的行为触发事件功能

7、给红色物体命名为“a”,并设置其【拖动/旋转】属性设僭轿魍儿为【自由拖动】,蓝色物体添加【播放】行为,【触发事件】选为【拖动物抄荛挝毳体离开】,行为属性设置中选【拖动物体名称】为“a”。预览时,拖动红色物体离开蓝色物体,当其移动到蓝色物体外面时,会触发【播放】行为,帧号会变化。

Html5页面交互动画的行为触发事件功能

8、以上还是比较简单的,如果大家还有什么不明白的,可以关注我留言都行。

QQ屏幕翻译热键是什么 Ae怎么快速启用原地踏步功能 AxureRP如何设置页面背景 Ae中如何添加粒子运动场并调整参数 maya对称模型制作技巧
热门搜索
昆仑山图片 女人阴沟图片 动漫美女比基尼图片 朴有天图片 钢板网图片