Axure教程:如何制作有趣的小红书促销小游戏?

产品老司机手把手教写文档,10天线上课程,零基础掌握产品经理必备7大文档撰写法。了解一下>

如何利用Axure来制作有趣的小红书促销小游戏?一起来文中看看~

温馨提示注:本教程适合有Axure基础的人观看

首先我们先看看制作的效果:

axure制作有趣的小红书促销小游戏

操作说明:长按圆脸,脸会随着鼠标按的时间压缩,压缩越久,松开鼠标时弹得越远,同时能把箱子顶得越远。箱子跟顶部虚线框重合度越高,获得分数越高。

当在小红书看到这个游戏时,我觉得可以用Axure实现,所以就花了时间把它做下来了。

话不多说,教学开始~

一、圆脸

步骤1:画脸

动效分析:当长按时

  • 脸会被压缩
  • 眼睛变样
  • 脸越来越红

根据这三个特性,我们把圆脸分成三部分画出来。

axure制作有趣的小红书促销小游戏

元素说明:

  1. 脸直接画一体的,方便一起变形,命名:脸背景
  2. 腮红是用photoshop画笔点了一下,白色为透明的,命名:脸红
  3. 眼睛用动态面板,分别创建两个状态,命名:眼睛

步骤2:做动效

(1)首先把三个元素组合到一起,命名:脸,因为要控制三个元素一起变形。

axure制作有趣的小红书促销小游戏

(2)选中脸组合,创建动态面板,命名:角色。绘制背景375*667,填充粉红色。添加一文本,输入0,命名:长按时间(这个数据很有用)。

axure制作有趣的小红书促销小游戏

(3)利用动态面板记录长按时间,创建一个动态面板,命名:记录时间,创建两个状态。设置用例当长按“角色”时,设置“记录时间”动态面板开始循环,循环间隔100ms。同时,由于长按“角色”时,想让眼睛变形,所以设置“眼睛”为状态2,如下:

axure制作有趣的小红书促销小游戏

“记录时间”动态面板设置

控制“长按时间”文本值范围在0-10之内,所以设置在“长按时间”<10情况下执行以下命令。

axure制作有趣的小红书促销小游戏

第一条用例说明:“记录时间”状态每改变一次,“长按时间”文本值+1。

第二条用例说明:设置“脸”高度尺寸随长按时间增长变小。LVAR1变量为“长按时间”元件文字。

axure制作有趣的小红书促销小游戏

第三条用例说明:首先设置“脸红”元件透明度为0,LVAR1变量为“长按时间”元件文字

步骤3:设置移动

(1)设置元件“角色”,鼠标松开时用例:

首先设置“记录时间停止循环”,设置变形后的“脸”变回之前的尺寸。

等待执行上述两操作之后,移动“角色”,距离是“长按时间”×20,动画线性500ms。

等待500ms移动结束后,移动“角色”回到之前的距离。

设置“眼睛”为之前的眼睛;

设置“脸红”透明度0;

设置“长按时间”为0。

axure制作有趣的小红书促销小游戏

角色根据长按时间弹起效果

axure制作有趣的小红书促销小游戏

结束语

其他效果大家可以自行研究,有不懂可以提问,大家可以在公众号获取原型和素材,或者直接百度云下载:

链接:https://pan.baidu.com/s/1EFCeF3tuLk02AR2Wvhd_lA

提取码:8n8c

 

作者:suck-mylip

本文由 @suck-mylip 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
1人打赏
评论
欢迎留言讨论~!