8. 延时动画 Timed Animations - Origami Studio教程


下载教程文件** ·····密码: ahgt**

选择对应名称的文件夹下载,内包含一个(开始)和一个(已完成)文件;(开始)文件用来和教程同步操作,(已完成)是最终结果。


Create time-based, automatic animations. 创建定时动画。

Sometimes you would like an animation to occur simply on its own — as soon as a prototype starts, or with only a timer triggering it.Sometimes you want multiple things to happen over time, all purely time-based, without any tap triggers or the like.

有时需要一个动画在原型开始时自动启动,或通过定时器自动启动。有时需要随着时间的推移激活多重事件。这些都是纯粹基于时间的,没有任何点击之类的交互触发。

We're going to rebuild the Comments experience of Facebook Live to explore how to do this. Make sure you download the tutorial files if you want to follow along with the same material.

我们将重新创建 Facebook Live 的评论,学习怎么实现。下好载教程文件。

Setting up 配置

If you start with the tutorial files, you should see that we have already connected our Comments Position Y to an Option Switch and Option Picker. (If you haven't checked out the lessons on Multiple States you might not know what this means. That's fine for this tutorial).

打开标记为(开始)的文件。编辑器中 Comments Y 轴 已经连接了 Option Switch 和 Option Picker。(如果还没有学习《Multiple States 切换多个状态》 可能会不知道是什么意思,可以先学习那篇。)

板栗:教程文件里用到了剪切蒙版,在《Masking Layers 剪切蒙版》 里会详细讲解怎么用剪切蒙版。

Your starting tutorial files should look similar to this. 一打开文件模块的连接就是这样的了。

Click through each of these inputs to cause a pulse, making the Position Y of Comments move up or down. Clicking on Set To 1 will bring up our first position, Set To 2 our second, and so on.

点击 Option Switch 模块每个输入口后的小点,可以看到 Comments 图层沿 Y 轴方向上下移动。

Click on each Option Picker input to see Comments Position Y change. 点击每个输入口。

When prototype starts 原型启动时

That first position (Set To 0) is our starting position. How can we automatically have our prototype go to next position (Set To 1) after a set time?

第一个位置(Set To 0)是我们的起始位置。
那怎么在一定时间后自动将原型转到下一个位置(Set To 1)呢?

Origami has a patch for this purpose, called When Prototype Starts.

Origami 有一个叫 原型启动时 When Prototype Starts 的模块可以控制原型启动时激活交互。

Insert one to our Patch Editor by double-clicking on the Patch Editor Cmd Return, typing to find When Prototype Starts, then Return.

添加一个 When Prototype Starts 模块到编辑器。

Then connect this to the Set to 1 input on the Option Switch patch.

连接到 Option Switch 模块的 Set to 1 接口。

Be sure to connect this to Set to 1, since Set to 0 is our starting position. 检查确定是连接到 Set To 1 的。我们要实现从 Set To 0 的位置自动移动到 Set To 1,0 是起始位置,连接到这里不会有任何效果。

Our prototype has already started, so we won't see the effect of this until we click the Restart Prototype button on the Viewer toolbar. Keep an eye on pulses occurring in the Patch Editor as you do this.

因为原型是已经开始的状态,所以我们不会看啥效果。点击查看器工具栏上的重新启动原型按钮。注意在编辑器中发生的脉冲。

Click the Restart Prototype button on the Viewer toolbar. 重启原型。

Wait 等待

We are instantly going to Option 1, but what we actually want is for that option to only kick-in after the prototype starts and holds off little bit, to give a bit of breathing room. We want the prototype to Wait a second.

现在是立即进入 Option 1 的,但想要的是在原型开始之后才能启动,并且暂停一会儿,给一点喘息的空间。所以需要原型等待一秒钟。

Insert a Wait patch between the When Prototype Starts and the Option Switch. Double-click on the Patch Editor Cmd Return, type to find Wait, then Return.

添加一个 Wait 模块。

Connect the When Prototype Starts output to the Start input in the Wait patch, and the output of Wait to that Set to 1 input.

将 When Prototype Starts 输出口连接到 Wait 模块,将 Wait 模块连接到 Option Switch 的 Set To 1 输入口。

Make sure the Wait patch connects to the Set To 1 input. 确定连接的是 Set To 1 。

Restart our prototype now, and keep an eye on the first two patches. You should see that the signal is immediately sent, and then after one second, the signal is carried on to the Option Switch.

重启原型,注意看前两个模块。可以看到信号立即发送到 Wait 模块,等了一秒钟后才被发送到Option Switch。

There are a few ways to automatically advance to the next Set To inputs, but for the sake of simplicity, we are going to add more Wait patches as our solution. These will then be connected to corresponding inputs in the Option Switch.

有几种方法可以实现自动进入下一个Set To 输入口,但这里会讲最简单的一种,添加更多 Wait 模块将它们连接到 Option Switch 对应的接入口上。

Add more Wait patches by double-clicking on the Patch Editor ⌘⏎, typing to find Wait, and then Return ⏎.

添加 Wait 模块到编辑器。

Like the first Wait patch, have the output of the When Prototype Starts go into its Start input. Have the output of this Wait patch go to the next Option Switch input, which is Set to 2.

跟第一个 Wait 模块一样,将 When Prototype Starts 的输出口连接到 Wait 模块的 Start 输入口,再将输出口连接到 Option Switch 的 Set To 2 输入口。

Give the second Wait patch a duration of 3 seconds. That means that the 3 seconds is counting from when the prototype starts, not 3 seconds from when the first Wait patch is triggered.

让第二个 Wait 模块持续3秒。3 秒是从原型开始计数,而不是从第一个等待补丁结束后的3 秒。

The first Wait patch triggers instantly When Prototype Starts. `3` seconds later, the next one triggers. 第一个 Wait 模块在原型启动时立即触发。 3秒钟后,触发下一个。

Multiple delays 多重延误

For the sake of simplicity, keep all timing connected to When Prototype Starts.
Add enough Wait patches to cover each Option Switch input (5 in total). You can add new patches by double-clicking on the Patch Editor, or by Option-clicking and dragging an existing one. That will create a new Wait patch, with the same input connection.

再添加 3 个 Wait 模块分别连接到 When Prototype Starts 和 Option Switch 之间。

Do three more of these so we have 5 Wait patches in total. Change the durations of each so they all trigger at a different time. The third Wait patch for example could have a Duration input of 6 seconds, second-last Wait patch 8 seconds, and the last 11 seconds.

分别更改 Wait 模块的持续时间,让它们在不同的时间触发。例如:第三个Wait 模块的 Duration 输入6 ,第四个 8,最后一个 11。

板栗:时间差多少自己随意啦,只要后面的比前面的长就行。

Lastly, connect each Wait patch output to the remaining inputs on the Option Switch, in sequential order.

最后,按顺序将每个Wait 模块的输出口连接到Option Switch 上的其余输入口。

The Wait patches should be ordered in shortest to longest Duration, and connected in this order to the Option Switch inputs. Wait 模块持续时间从短到长排列,并按此顺序连接到 Option Switch 输入口。

Like earlier, click the Restart Prototype button and keep an eye on the Wait patches as each Duration passes.

重启原型,注意看信息通过时每个 Wait 模块的 Duration 。

Each of these Duration values are measured from When Prototype Starts, and send their respective outputs to the Option Switch accordingly. The Option Picker takes each option and outputs a corresponding position for Comments Y.

Duration 值都是同时从 When Prototype Starts 接收的,并将相应的输出发送到 Option Switch。
Option Picker 根据每个选项输出调整 Comments Y 轴方向的的位置。


相关课程

1. 入门 Getting Started
介绍怎么使用 Origami Studio。

相关案例

2. Facebook Live Comments
自动在 Facebook Live 视频中添加评论。

5. Facebook New Stories
当新闻滚动一定距离时触发提示出现。

20. Moments Onboarding
Moments APP 的启动流。

相关模块

Pop Animation Option Switch When Prototype Starts Wait


NEXT UP
9. 多个状态切换 Multiple States
在两个以上的状态之间切换,如 Tab 栏。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容

  • NAME dnsmasq - A lightweight DHCP and caching DNS server....
    ximitc阅读 2,805评论 0 0
  • 『女子如画』文|燕裁衣 芸芸众生,相聚与此,有缘与此话女子。 女子十三,及豆蔻年华;喻为粉笔画,此经年女子,如灵芸...
    燕裁衣阅读 579评论 1 7