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

访客4年前黑客文章880

随机效果是动效设计中较为常用的基本动效,本文将详细介绍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%随机)的细微随机变化可以增加小球移动过程中的变化显得更为真实。

相关文章

播客还有没有未来?

播客还有没有未来?

编辑导语:20世纪初,人们可以通过收音机在看不到发声体的环境下听到声音,厥后留声机的呈现也造就了人们听内容的习惯。跟着播客的快速成长,人们曾经一度认为这种前言会接替博客成为下一世代的媒体主流,然而直到...

用户能读懂你的设计吗?

用户能读懂你的设计吗?

编辑导读:优秀的设计应该将产物设计得尽大概信息顺畅、容易领略和容易利用,让人们能在短时内就能快速领略,快速上手。本文作者别离从这三个方面切入,别离举办了梳理和接头,一起来看看~ 设计不是凭空假造出来...

揭秘!视频号互赞互粉真的能上热门吗?

揭秘!视频号互赞互粉真的能上热门吗?

编辑导读:微信视频号已经开通一段时间了,许多视频创作者都在头疼点赞量和播放数,于是呈现了许多互赞互粉的同盟。本文作者按照亲身经验,对这个问题提出了本身的一点观点,但愿对你有辅佐。 视频号开通一段时间...

做好这7点,落地页转化率飙升!

做好这7点,落地页转化率飙升!

编辑导语:落地页一般用于营销可能告白勾当,目标是让用户完成指定行动;可是要想做好一个完整的、效率高的落地页,也不是那么简朴的工作;本文作者具体阐明白落地页的流程和具备的要素,我们一起来看一下。 落地...

内容型产品中分类管理的分析与设计

内容型产品中分类管理的分析与设计

编辑导语:当我们在图书馆想找到一本书时,面临偌大的图书馆,必定不能一本一本去找,这时候就要用到图书馆里的搜索设备去找那本书可能那类书的或许位置;本文作者就具体先容了内容型产物中的分类打点设计。 一、...

听“大 V”的还是“听身边的人”

听“大 V”的还是“听身边的人”

编辑导语:大V,指在微博上十分活泼、有着大群粉丝的“公家人物”,凡是把粉丝在50万以上的称为网络大V。大V多是有必然知名度的学者和名流,因此成为爆料者的求助工具。有些大V其实已经是半个媒体——他们时时...