假期是一年中的美好时光,充满了朋友、家人、食物……和原型?现在,我们用 Axure RP 制作的雪花节日贺卡祝您节日快乐。

每片雪花都遵循一个循环,使其不断下落、旋转和褪色——永远!当雪花重置时,它会根据随机生成的值调整大小。此外,雪花下落和旋转的速度取决于其大小,因此较大的雪花比较小的雪花移动得更快,从而产生深度错觉。

让我们仔细看看这个交互循环的每一步。打开Snowflake母版,选择repeater就可以开始了。

1. 设置雪花的大小

Snowflake母版中的中继器只有一行,它创建了一个雪花。

转发器的Item Loaded交互以Set Size操作开始,该操作将雪花的起始大小乘以中继器的SizeFactor列中的值(此值1默认设置为,但它会随机化为第 3 步110第 3 步之间的值。)

以下公式用于设置雪花的宽度和高度:

宽度: [[Target.width * Item.SizeFactor]]
高度: [[Target.height * Item.SizeFactor]]

注意: Target指雪花,因为它是Set Size操作的目标

项目加载事件的结尾是:触发雪花的移动事件来开始它们的下降和循环旋转。

2. 移动和旋转雪花

在 Axure RP 中制作动画节日贺卡雪花的移动交互有两种情况,它们使用条件逻辑来确定移动雪花时会发生什么。
  1. 第一种情况Fall and Rotate使雪花在页面上向下移动,只要它高于存储在SnowflakeFadePoint 变量中的 Y 值(变量值设置为浏览器窗口高度的 75%,与Happy Holiday页面的窗口改变尺寸交互。)

    请注意,移动旋转操作[[This.height]]在其值中使用这就是我如何根据雪花的大小让雪花下落和旋转得更快或更慢。雪花越大,它走得越快。

  2. 一旦雪花低于SnowflakeFadePoint值,Fade Out用例就会使用淡入淡出动画将其隐藏,从而触发其隐藏交互。

3.重置雪花

在 Axure RP 中制作动画节日贺卡

雪花的隐藏交互以500 毫秒等待动作开始,为完成淡入淡出动画留出足够的时间。

然后删除This repeater row,从而删除雪花。

最后,它向repeater 添加了一个新行,从而创建了一个新的雪花。这是步骤 1中的SizeFactor值随机化的地方。新的转发器行在SizeFactor列中添加了以下等式

[[Math.floor(Math.random() * SnowflakeMaxSizeFactor) + 1]]

这会1SnowflakeMaxSizeFactor变量中存储的值之间生成一个随机数,该值设置为10(您可以通过转到应用程序菜单中的项目 → 全局变量来更改此值。)

将新行添加到转发器后,循环从步骤 1 重新开始。

下载示例 RP 文件



当然,Happy Holidays页面上还有很多事情可以创建您看到的降雪。这个交互循环只是基本的构建块。查看该页面的小部件设置、页面加载交互和窗口大小调整交互,以了解其他所有内容如何工作。



点赞(1)

Comment list 共有 0 条评论

暂无评论