# 无代码添加交互功能
>[info]##### 本节将向大家介绍一下如何快速制作一个摇一摇随机出现结果的H5测试题。
* * * * *
上传、添加动画:如下图所示,新建作品页面。上传、添加背景图片、文字等素材,同时新建第2页,添加与第1页相同素材。
![](https://box.kancloud.cn/b972ccb5be11a3f03ab9937ce7f4d2e8_800x496.png)
>注:第1页素材可添加进一个图层内,为方便设置关键帧动画,第2页应注意新建图层,将每个素材分别添加进一个图层内。
添加预置动画:选中第1页面,为舞台上的各个素材添加预置动画效果,例如为图片“摇一摇”素材添加“放大进入”进入动画效果,为文字“摇一摇”素材添加“颤抖”强调动画效果
![](https://box.kancloud.cn/f40f31d3c1c1320a0426aa731a5a513e_800x430.png)
也可在各个素材的“动画选项”对话框内改变延迟时间
![](https://box.kancloud.cn/82016b04248cb4a65eb6133980f832c5_800x391.png)
如下图所示,选中第2页面,为图层1、2(分别放置了“摇一摇”上下两部分图片素材)添加“插入关键帧动画”
![](https://box.kancloud.cn/2e0fdbc0c684cf5e361cec2ec5a71d61_800x422.png)
选中图层2时间轴上最后一个关键帧,鼠标在舞台上将该图层上物体,即“摇一摇”上部分图片素材移至舞台上方
![](https://box.kancloud.cn/ea55ae39e73193269aff5b734d18f443_800x457.png)
同理选中图层1时间轴上最后一个关键帧,将“摇一摇”下部分图片素材移至舞台下方,作出“摇一摇”图片上下分开的动画效果
![](https://box.kancloud.cn/8fc90600eabb19e27f3dd2a2146b43ff_800x463.png)
设置打开时有类似回弹的动画效果,可选中“摇一摇”上部分图片素材,在其“属性面板”下设置“运动”为“碰撞进入”。同理设置“摇一摇”下部分图片素材运动效果。
![](https://box.kancloud.cn/31b99a62cecc65a454a1bdbe36cc9137_800x446.png)
复制页面:复制两次第2页面为第3、4页面。
替换图片素材:选中第3页面,选中人物图片素材,点击“属性面板”中的图像“编辑”按钮,在弹出的“媒体库”中选择相应图像替换该图像。
![](https://box.kancloud.cn/f5c7122422edf463a56f5ca61be3ef03_800x407.png)
同理,替换人物名字素材
![](https://box.kancloud.cn/962b6941d24f38b4d9150e8f60ae0b29_800x440.png)
同理,选中第4页面,替换人物图像素材与相应名字素材
![](https://box.kancloud.cn/c94b505172e41575f913128687827721_800x462.png)
添加“禁止翻页”动画:选中第1页面,选中舞台上的“摇一摇”文字素材,点击其右边的“添加/编辑行为”按钮(橘黄色圆圈按钮)
![](https://box.kancloud.cn/a0cffdf40018a4cf614cc3b7611270d3_800x432.png)
弹出“编辑行为”对话框,选择“动画播放控制”→“禁止翻页”,设置“触发条件”为“出现”
![](https://box.kancloud.cn/80720abf042b80d32a4d0f540d3a827f_800x387.png)
继续添加“编辑行为”,选择“动画播放控制”→“跳转到页”,点击“编辑”按钮,弹出“参数”对话框
![](https://box.kancloud.cn/3ff836e25453ef89717655bb999b8674_800x427.png)
设置参数值:页号:2;3;4(英文输入方式),点击“确认”,即设置点击“摇一摇”文字素材即可随机跳转到2、3、4页的动画效果。
![](https://box.kancloud.cn/8784c7241424e0f861481afba120a664_800x436.png)
设置“跳转到页”动画效果:点击选中第2页面左上角“返回”文字素材,点击该素材“添加/编辑行为”
![](https://box.kancloud.cn/a928cf6dc12371cc405278b91bff61a8_800x364.png)
在“编辑行为”对话框中,添加“跳转到页”行为,点击“编辑”按钮,设置“参数值”为“页号”:1
![](https://box.kancloud.cn/235889ebb68aa97d940997971e72c3cd_800x356.png)
![](https://box.kancloud.cn/740f6a436ecf3e6aecd0f34ee24b1325_800x432.png)
复制粘贴行为:点击第2页面“返回”文字素材,鼠标右键→“复制行为”
![](https://box.kancloud.cn/25899eccf488f468c2f3b448cbe79f39_800x356.png)
选中第3页面“返回”文字素材,鼠标右键→“粘贴行为”,即将第2页面该素材行为复制粘贴进第3页面响应的素材内。同理复制粘贴行为至第4页面“返回”文字素材
![](https://box.kancloud.cn/9bb2e72ada0521d30a2169a957910462_800x354.png)
> 注:由于摇一摇动作不能在电脑端体验,因此为方便直观感受之前操作都将“摇一摇”素材触发条件设为“点击”,现将其改回“摇一摇”。
改变“摇一摇”文字素材触发条件:点击选中第1页面的“摇一摇”文字素材,点击“添加/编辑行为”按钮
![](https://box.kancloud.cn/6e1021139d9c2bfb125834befba53de4_800x263.png)
在其“跳转到页”的触发条件中,将“点击”改为“摇一摇”,点击保存。
![](https://box.kancloud.cn/899a563f8533e31e4188ee62b85a198c_800x383.png)
二维码扫描:点击“通过二维码共享”按钮,用手机扫描生成的二维码,体验作品。
![](https://box.kancloud.cn/b008596acda12ae5109a7d6c21b483f2_800x487.png)
观看本节视频教程:
http://medu.mugeda.com/lesson/5948eb0f9aeb7060c44f03d9
- 阅读须知
- Mugeda平台介绍
- 新手必看
- Mugeda是什么?
- 快速入门
- 快速制作炫酷动画
- 无代码添加交互
- 学会使用Mugeda模板
- 如何快速修改木疙瘩模板
- 作品创建前必读
- 手机屏幕适配方法
- 图片处理
- 声音及视频处理
- 屏幕适配设置
- 发布和预览链接的区别
- H5作品相关设置
- 如何发布作品
- 功能详解
- 界面与舞台
- 简介
- 缩放层数据
- 翻页的相关设置
- 关键帧和页面的命名
- 加载的相关设置
- 物体属性设置
- 元件界面介绍
- 滤镜效果
- 屏幕适配范围与安全框
- 辅助线功能
- 首页加载的静态导出
- 素材与媒体
- 图片上传/素材库
- 文本/文本段落
- 网页
- 幻灯片
- 视频
- 声音
- 声音的控制
- 绘制素材
- 云字体
- 曲线图表
- 拖动动画
- 虚拟现实
- 粘贴第三方文字和图片
- 常用编辑操作
- 锁定物体
- 节点工具
- 路径工具
- 排列、对齐、变形、组合、合并功能
- 转换为元件
- 导入PSD及注意事项
- 声音和视频的压缩
- 声音和视频的交互控制
- 动画
- 时间轴及图层
- 选择工具
- 关键帧动画
- 路径动画
- 进度动画
- 曲线变形动画
- 预置动画
- 元件动画
- 分页/加载页
- 遮罩动画
- 动画运动
- 标尺和辅助线的使用
- 复制帧/图层
- 如何实现动画控制
- 文字变形动画
- 运动曲线编辑
- 行为
- 行为添加以及触发事件
- 帧的行为
- 页的行为
- 播放元件片段
- 改变元素属性
- 改变图片
- 设置定时器
- 手机功能
- 跳转链接
- 拖动的多种逻辑关系
- 舞台截图
- 改变行为属性增加方框颜色
- 控件
- 陀螺仪
- 定时器
- 随机数
- 擦玻璃
- 点赞
- 绘画板
- 投票
- 抽奖
- 连线
- 拖动容器
- 投票、抽奖实时数据管理
- 计数器组件
- 排行榜
- 微信功能
- 微信头像/微信昵称
- 定制图片
- 录制声音
- 分享信息
- 表单
- 自定义表单
- 系统默认表单
- 定制文字
- 定制贺卡文字
- 关联绑定
- 舞台动画关联
- 元件动画关联
- 属性关联
- 自动关联
- 公式关联
- 条件判断
- 逻辑表达式判断
- 多种表达式的写法
- Mugeda API
- MugedaAPI整体结构
- 在动画中插入脚本
- 使用自定义回调函数
- 通过API定义微信转发
- 获取Mugeda后台数据
- 部署第三方服务器
- 案例讲解
- 展示动画
- 邀请函
- 招聘
- 个人简历
- 可定制贺卡
- 手机广告
- 长按手指控制动画播放
- 2016网易娱乐圈画传
- 一只挖空心思的行礼箱
- 科幻风格H5的制作
- 拖动长图类H5制作
- 小爷吴亦凡案例
- UI原型
- 小图标动画
- 用Mugeda巧做GIF
- 小游戏
- 拍宇航员
- 手术刀
- 测试题
- 拖动选择
- 概率抽奖
- 声音测试题
- 真假朋友大质检
- 图片合成类H5的制作
- 60秒帮你摆脱朋友圈
- H5录音机
- 制作接力型H5
- 微信/定制
- 和宝宝聊天
- 和奥运冠军合影
- 热门案例(试看)
- 什么才是福
- 教你玩转密室逃脱类H5制作
- 星巴克咖啡
- 小爷吴亦凡
- 谁是足球明星
- 拷问拍拍618机密
- 用HTML5做交互课件
- CEO邀你群聊
- 里约大冒险
- 天猫宇宙邀请函
- 快闪
- H5换装小游戏
- 视差类型H5制作
- H5版flappy bird
- 连连看小游戏
- 用遮罩做镜头特效
- 网易5笔画爱
- 剪刀石头布小游戏
- 交互动画类H5制作
- 最新功能(1213)
- 如何使用排行榜
- 小功能更新
- 锁定边距
- 其他教程
- Mugeda简约版介绍
- 如何自定义绑定微信公众号
- 教师版账号详情介绍及使用方法