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

Posting(发布内容)#

点击发布按钮,我们想要把新内容插入首页内容的头部。回头看一下首页信息流的图层组,我们可以把它重命名为“Feed Strip”,显然,它需要增加长度,并把新内容容纳进来。所以,当新内容进来时,首页信息流的高度也要随之变化,而已知这个内容框的高度是900,所以首页信息流的高度也要增加900。把光标悬停在Feed Strip的Pixels High,按下键盘“t”,添加Transition模块。当按下了Post按钮,首页的高度要增加900,此时Transition模块的输入端口Progress数值一定是1,所以我们先把它设为1,End Value自然是2100+900。再双击Feed Strip图层组进入,把原来信息流的Anchor Point改成Bottom Center,使新内容进来后原来的页面定位到底部中心,再把新内容的位置Y Position调为909。这样,发布内容的位置就设好了。

调整新内容位置.png

Resizing the Scroll Content(调整滚动内容的大小)#

现在,我们来使首页信息流以动画方式来增加高度,把光标悬停在Pixels High Transition模块的Progress端口上,按下键盘“a”,添加Pop Animation模块。接着,需要一个开关来记住是否发布了新内容的状态。按下Post按钮后,才会出现新内容。按下键盘“shift+s”,添加Switch模块,把它插到Pop Animation的Number端口。不过,这时候会发现,新内容的图层覆盖了首页信息流,这是因为默认状态下,开关输出为0,导致Transition模块的Progress变成了0。最快的修复方法是,把新内容图层的顺序改为1,让它在原来的首页信息流的下面。

增加开关模块.png

然后,就是让“Post Button Up”来控制打开开关了。我们可以复制粘贴一个“Post Button Up”,然后把它插到开头的Turn On端口。现在来试一下效果,点击首页右下角添加按钮,进入内容发布页,点击右上角发布按钮,新内容出现了。不过,因为我们发现显示的时候,动画是在发布新内容页面图层的下方出现的,显然不正确。

Conditional Logic(条件逻辑)#

想要做到的效果是,新内容进来时,原来的首页会动态地向下移动。从实现的角度来考虑,实际上是当按下发布按钮且发布内容页离开屏幕后,首页的高度增加。如何判断发布内容页是否离开了屏幕呢?很简单,只要看它当前的Y Position是否小于真正离开屏幕时的Y Position就可以了。这时,我们需要使用Conditional Logic模块。按下键盘“c”,即可添加到文档里。把控制Composer图层Y Positon的Transition模块的Value插到First Value。我们看到,当真正离开屏幕时,发布内容页的Y Position是-1341,所以当First Value小于-1340时,就说明页面完全离开屏幕了,于是把Second Value设为-1340,Condition设为Lower Than。顺便把Conditional Logic模块重命名为“Composer is Off Screen”,把上面的开关命名为“Post Button Was Hit”。前面讲过,当按下发布按钮且发布内容页离开屏幕后,再开始动态地增大首页的高度,把光标悬停在Pop Animation的Number端口上,按下键盘“shift+a”,添加逻辑模块AND,再把Conditional Logic的Result插到它的输入口。这时,我们点击添加按钮,出现发布内容页,点击发布,新内容就会等到上一页面离开屏幕再动态地插入了。

添加条件逻辑模块.png

Fixing the Close Button(修复关闭按钮)#

再次添加按钮,出现发布内容页,点击关闭按钮,发现还会插入新内容,这是为什么呢?检查一下,因为当Switch被Post Button Up打开了之后,没有关闭,就一直处于打开状态。应该在首页点击添加按钮时,先把这个开关关掉。把添加按钮对应的Interaction2模块的Up端口插到Turn Off就OK了。

修复关闭按钮.png

Delay Patch(延迟模块)#

我们继续做些优化。眼尖的同学会发现,在首页点击添加按钮后,可以看到发布内容页滑上来的同时,底下的首页信息流也将向上滑动变回到原来的高度,在实际正常的交互中,应该给用户感觉到底部是不变化的,只有发布内容页向上滑。为了修复这一点,我们可以把首页信息流高度恢复到原来的动画稍微延迟一些,这样在发布内容页上滑出现的时候,看上去底部的页面是不动的。Pop Animation的输入是AND之后的结果,如果发布按钮被点击且发布内容页离开屏幕,这个结果是1,当在首页点击添加按钮时,结果是0。我们是希望只在点击添加按钮时,首页信息流的动画延迟出现,所以是从1减成0时有延迟。按下键盘“d”,添加Delay模块,把AND的结果插到它的Value输入口,再把它的Value输出口插到Pop Animation的Number端口。然后,把Style选择为Delay Decreasing,这样就只有当数值从1减为0时才会有延迟,延迟时间默认是0.5秒。这时,就得到想要的效果了。

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

推荐阅读更多精彩内容