Origami入门教程7-视频4:Creating a New Post(上)

在本节的视频Rooms Part 3: Creating a New Post里,我们将在上次课程的基础上,继续制作创建新内容的交互。因为视频较长,将会分成上、中、下三次课程和大家一起学习。最后希望达到的效果是:点击首页右下角的添加按钮,从下往上弹出发表新内容的页面,在这个页面上,点击关闭按钮,可以回到首页;点击发表,则新内容会以柔和的动画插进首页的头部。

首先,请下载Origami入门教程7材料,提取密码: qzmm。我们先给添加按钮加动画。一般来说,按下按钮后,按钮应该有一定的变化,我们这里希望按下添加按钮,它会动态地变小一些。先添加Interaction 2模块,把它插到添加按钮的Layer上,使它只作用在添加按钮的图层上。想要有动画很简单,把光标悬停在Interaction 2模块的Down端口上,按下键盘“a”,就添加了Pop Animation模块。此外,我们需要控制一下按钮大小变化的范围,显然,添加Transition模块就可以了。把光标悬停在Pop Animation模块的Progress端口上,按下键盘“t”,即添加成功。接下来,把Transition模块的Value插到添加按钮Layer的Scale端口上。没按下按钮的时候,Down输出是0,也就是Transition模块的Progress值为0,此时按钮应该以最大的尺寸显示,所以Transition的Star Value应该设为1。按下按钮后,Down输出是1,也就是Transition模块的Progress值为1,此时希望按钮变小一些,可以把End Value设为0.8。这样,按下按钮后,它会动态地变为原来大小的80%。如果觉得动画的弹力不够,把Pop Animation模块的bounciness改大一些就可以了。这里设为10,感觉还不错。

给添加按钮做动画.png

Creating a New Post(添加发布窗口)#

现在我们开始添加发布窗口。先把材料里的Composer.png拖进文档里。我们希望是,当点击了添加按钮后,这个页面才显示,所以肯定需要控制Y Position的数值。把光标移到这个图片对应的Layer模块的Y Position端口,按下键盘“t”,添加Transition模块。没有点击按钮的时候,需要把这个页面移到下方看不到的地方,调整Star Value的数值,这里设为-1341就差不多了。当按下添加按钮时,页面应该出现,因为这时Progress输入为1,所以End Value要设为0,最后输出才会为0,显示整个页面。当显示这个页面时,也需要动画效果,所以光标悬停在Transition模块的Progress端口,按下键盘“a”,添加Pop Animation模块。根据我们的需求,是否点击添加按钮会有不同的状态,显然,我们需要一个开关来判断手指是不是在屏幕上,当手指离开了屏幕,才弹出这个页面。把光标悬停在Pop Animation模块的Number端口,按下键盘“shift+s”,添加Switch模块。为了之后能更清晰地理解它,我们可以对它重命名为“Composer is Visible”。接下来,就让按钮打开这个开关。

在控制开关之前,我们来深入认识一下Interaction 2模块的几个输出端口。Down端口在按下图层时会输出1,否则输出0,用在需要判断按下状态的情况;Up端口在图层被松开时会输出1,适用于使用按钮的情况;Tap端口在图层在固定位置轻按时会输出1,适用于按钮处在可滚动图层上的情况;Drag端口则在被按下直到松开的整个过程中都会输出1。这里,我们只需要使用Up端口。把它插到Switch模块的Flip端口,然后再点击添加按钮,松手后,发布页面就从下往上弹出来了。

点击添加按钮弹出发布页面.png

Going Back(返回)#

点击发布页面左上角的交叉按钮和右上角的Post按钮,都希望可以返回到首页信息流。这就要求点击这两个按钮后,可以把Switch模块代表的开关关闭掉。显然,我们需要在这两个按钮上添加Hit Area。因为点击区域和这个页面是永远一起显示的,所以需要把它们放在图层组里。把光标悬停在Composer这个Image上,按下键盘“g”,把这个Layer Group再双击进入图层组,按下键盘“h”,添加Hit Area。将Anchor Point设为Top Left,Width和Height分别调节为139和187。再复制粘贴一个Hit Area,Anchor Point设为Top Right。这样,两个点击区域都设置完成了。接着,把光标悬停在Hit Area的输入口,按下键盘“i”,分别都添加上Interaction 2模块。

我们希望把Up口与外面的Switch模块相连,按之前课程讲过的,可以对准Up口按下键盘“p”,把这个端口放到外面去。在这里,向大家介绍另一种有用的方法。在Origami里,有一个新模块叫“Wireless Broadcast”,它能够以无线方式把数值传递到文档里任一模块。把光标悬停在Up端口,按下键盘“w”。双击它重命名为“Close Button Up”。同样的方法,添加“Post Button Up”。

添加无线发送器.png

返回上一层,我们看不到哪里有显示跟这个无线模块有关的东西。按下键盘“shift+w”,发现添加了一个“Wireless Receiver”模块,用它就能接收刚才设置的两个发送器的数值。按下键盘“command+2”,进入它的设置,选择需要接收的发送器名字。先选择“Close Button Up”发送器,把它插到Switch模块的Off端口。此时在右边的手机屏幕上点击左上角交叉按钮,页面就从上往下收回了。

添加无线接收器.png

Logic Patch(逻辑模块)#

同样,我们再设一个“Wireless Receiver”模块来接收Post Button Up的数值。不过,当尝试把它插到Switch模块的Off端口时会发现,刚才连接“Close Button Up”接收器的线不见了。这是因为不允许同时有2根线插到同一个端口。解决这个问题的方法就是使用Logic Patch(逻辑模块)。按下键盘“shift+a”,就成功添加了一个逻辑模块。双击此模块,可以发现,它有AND、OR、NOT也就是与、或、非等多种逻辑可选,我们用得最多也就是这三种了。我们是想按下关闭或者发布按钮,这个页面都往下弹走,所以这里应该选择OR。把这两个接收器插入到逻辑模块的输入口,再把逻辑模块的输出口插到Switch模块的Off端口,就可以了。

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

推荐阅读更多精彩内容