🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 无代码添加交互功能 >[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