ProtoPie进阶教程:随机函数的学习及应用

访客4年前黑客文章909

随机效果是动效设计中较为常用的基本动效,本文将详细介绍ProtoPie中的三种随机函数的使用方式,并利用随机函数进行随机抽号案例的 *** 。

ProtoPie进阶教程:随机函数的学习及应用

随机效果

Protopie进阶教程--随机函数的学习及应用

随机效果

日本设计师 Kazuki Akamine 按照常用运动图形中提取出的基础要素的特点,将所有基础动效分为了 14 个系列,便于设计师运用和学习,这其中就包括随机动效(脚本系动效)。随机指每一帧的返回值都是随机值的函数。将其使用在某一界面元素的位置属性上,这样每一帧对象都会移动到不同的地方,形成gif图中非连续性的激烈运动。除了位置属性,还可以应用在文本图层上,或是结合缩放属性实现多种多样动效效果。

Protopie进阶教程--随机函数的学习及应用

拓展–文本图层随机效果

Protopie进阶教程--随机函数的学习及应用

拓展–缩放属性随机效果

ProtoPie的随机函数

ProtoPie软件可以在表达式中添加随机函数来实现随机效果,软件共提供了 3 种可以使用的随机函数:

Protopie进阶教程--随机函数的学习及应用

ProtoPie中的随机函数

具体使用可以在软件中任何支持表达式添加的地方进行添加,实现对图层具体属性的随机赋值,使用过程中我这边在实际学习中有两个使用技巧分享给大家:

(1)利用反复实现连续的随机赋值

在随机动效说明动图中可以看到小球实际是在不断的做随机位置的移动,要是实现这样的效果除了使用随机函数外,还需要打开具体设置中反复开关,使其不断进行位置的随机移动。

Protopie进阶教程--随机函数的学习及应用

利用反复的连续随机赋值

(2)关联变量实现多属性同样的随机变化

在缩放属性随机效果中,有圆形的随机缩放效果,如果分别对宽度和高度添加随机函数,无法实现高度宽度的同步随机缩放,所以这里需要增加一个变量,对变量赋值随机函数后,再将宽度和高度的缩放比例与变量进行关联便可以实现等比缩放。同理当需要对多个基础属性的参数添加同样随机变化时,都可以使用添加关联变量的方式来实现。

Protopie进阶教程--随机函数的学习及应用

关联变量实现多属性同步随机赋值

随机抽号案例效果

Protopie进阶教程--随机函数的学习及应用

案例实际效果

在了解随机函数的使用 *** 后,可以结合实际案例来实操一下。本次的案例是一个随机抽号的效果,抽号机器中有0到9共10个数字小球,点击抽号按钮后,小球便随机的在某一具体区域内进行随机的变化,直至生成一个具体的随机数字小球,点击再来一次可以重新进行数字抽取。

具体实现步骤 Step1

在Sketch中先绘制好随机抽号机的基本视效,注意进行图层整理,将抽号结果、抽号按钮、抽号机上层效果、各个数字小球及整个机器底座成组并分层。导入ProtoPie中,导入完成后注意将各个数字小球的锚点设置为图层中心。

Protopie进阶教程--随机函数的学习及应用

基本视效界面

Step2

添加对抽号按钮的点击触发,在触发下先对1号小球添加对其旋转、大小、位置的随机变化,单次动效时长设置20ms左右,利用反复将随机状态的持续时长大约控制在1200ms左右,其中位置的随机参数需要设置在抽号机的显示窗口区域内,而添加旋转(-45°到45°随机)和大小(95%到105%随机)的细微随机变化可以增加小球移动过程中的变化显得更为真实。

相关文章

产品盈利设计的万能公式

产品盈利设计的万能公式

如何设计产品盈利点?产品的盈利模式有哪些?怎样做好盈利转化实验?在本文中,笔者梳理了产品付费转化的过程,不仅回答了以上的问题,还提出了产品盈利设计的万能公式。 如果一个产品打算赚钱,你觉得最佳开启转...

产品经理,你该如何提升产品决策质量?

产品经理,你该如何提升产品决策质量?

我相信很多刚入行的产品经理肯定遇到过这样的情况:做了一个很糟糕的产品策略,使得公司或者团队浪费时间甚至影响到长远的发展。那如何才能提升产品决策质量呢?笔者通过反面的角度讲解这个问题。 作为产品经理,...

了解电商后台系统,看这篇就够了

了解电商后台系统,看这篇就够了

文章从电商商业模式、电商后台、电商后台产品架构三个方面对电商后台系统展开了分析,并针对B端和C端的差异进行了梳理总结。 了解完整的电商后台,可以锻炼我们从全局角度看产品的思维,这样做产品就有前瞻性,...

从用户视角到微信视角,探讨微信「视频号」价值

从用户视角到微信视角,探讨微信「视频号」价值

「视频号」是微信信息生态下的能力补全,以满足用户充分表达自我的需求,而不是简单地模仿谁。本文就将与大家探讨「视频号」对内容创作者、内容消费者以及微信都意味着什么? 自今年1月底开放内测至今,「视频号...

「火花思维」如何在数学思维赛道中脱颖而出?

「火花思维」如何在数学思维赛道中脱颖而出?

随着疫情的几何式爆发,各大公司纷纷推出“免费试听课”,加上本就已经占领一定规模的互联网教育市场,使数学思维赛道的这匹红马更是被按下了快进键。那么赛道中的火花思维除了外部环境影响外,又为什么能脱颖而出呢...

品牌重塑:马德里地铁应用程序的重新设计

品牌重塑:马德里地铁应用程序的重新设计

马德里大都会区是马德里社区最常用的交通工具,越来越多的人喜欢在市中心的汽车前坐公共交通工具。但是,尽管用户数量在增加,但是我们发现人们获取信息以使用此服务的方式存在某些问题。为了集中解决问题,我们集中...