终於要从 Beginner 迈向 Intermediate 了。
这次的讲者讲话好清楚,转 1.75 倍都还是可以听得懂,赞。
从一开始 ProtoPie 就一直强调他们的 Conceptual Model 就是
Object > Trigger > Response 这样的互动关系。
在前面的范例里面,已经尝试使用以下几个 Trigger 和 Response 。
接下来会探索更多不同的 Trigger 和 Response 。
这次的教学里面主要会有三个:
ProtoPie 已经有不少预设,但这个教学会带我们走过几个比较复杂的转场。
讲者说会跟我们谈谈 Scrolling 跟 Paging 的差异,他们各自能做什麽。
如何用 ProtoPie 实作出侧边栏。
讲者请大家下载素材之後,跟大家说明,可能会长得像他萤幕上那样。
很值得学习的一点,他有顺道收缩的一下画面上的介面,也说可能会长这样。
对於很多初学者来说,这个小贴心动作,是很能让人放松并进入状态好好学习的。
毕竟一直担心是不是错的,或是错了很久才发现要修正,课程可能都进行一阵子了。
好,继续。
这个讲者习惯把 Preview 的视窗一直保持开启,这样能持续观看修改後的变化。
我也这样跟着做。
首先选择我们要处理的 Object ,这边是萤幕上的 IoT bg ,也就是模拟手机画面最左手边的 icon 。
接着我们在右侧选择一个 Trigger > Tap 。
我们这次要尝试在点击 icon 之後让 icon 放大(scale)来转场到下一个画面。
所以我们在Tap 的底下按加号後,选择 scale 这个 response 。
这时右侧会出现很多 scale 可以设定的参数,例如 Scale by Size/Factor (我们先选 Size)。
跟之前其他 response 很类似底下也有repeat 或是 Duration 这一类的设定。
我们点击萤幕上的 IoT bg 时,右侧会显示他的长宽为 60 X 60 。
而在 ProtoPie Studio 的最上方可以看到目前用的是 iPhone 11 Pro 的大小 375 X 812。
因此我们转场想要从小 icon 变成全萤幕,就能设定 Scale to 375 X 572 。
立刻点击 Preview 来测试,点一下 icon… 结果直接白萤幕往右下方展开。
这不是我们想要的,我们希望这个展开的新页面是萤幕置中的。
我们接着 Scale 的下一个 Response 选择 Move,那要 Move 到那呢?
随便找一个萤幕上的 icon 都会看到他们的位置,移动到画面的左上方就会发现,他的位置成为 (0, 0) 。
(我学讲者抓了一个白色的框框去左上角,右侧就会显示这里 X 和 Y 的 Position。)
这时候把 Move 设定 Move to (0, 0) ,再次 Preview 就是想要的互动行为了。
讲者此时没有特别去谈为什麽有些 icon 还在画面上,而是先跟我们说明如何单独测试刚刚 Scale 和 Move 这两个 Response 。
Scale 的右上角有个按钮,如果点击关起来这个 Response 就会先关闭(类似隐藏图层那样)。
我们刚刚用了 Scale 的 Scale by Size 而且选择 Scale to ,这个设定之後就会直接变成定义的那个长、宽。
如果是选择 Scale by ,可以把它想成长宽会再加上你定义的数字。
如果你的长原本是 100。
Scale to 150 时,你的长会变成 150。
Scale by 150 时,你的长会变长 250。
因此一开始我们打算把它变成手机萤幕大小的时候,直接用 Scale by Size 的 Scale to 设定好他的最终长、宽即可。
那如果你没有想要特别设定长、宽的时候,而是用比例的方式去调整变化,就用 Scale by Factor 。
如果你想要变成一半就是 50% ,或是变大三倍就是 300% 这样。
是我的错觉吗?怎麽有些照片好像上传会停住很久,好像超过 1MB 的都会比较慢?
继续观察,继续写。
今天暴食吃了一堆零食,中秋节快乐。
月有阴晴圆缺、人有悲欢离合。
好好呼吸、好好吃饭、好好生活。
>>: Day_09 : 让 Vite 来开启你的Vue 之 Vite 核心 Native ESM
朋友问我辞职後,最想做的第一件事是什麽,我居然回答坚持每天写日记。从肺炎开始用电脑写日记写了一年多了...
Amazon Linux 2 上将 Django 与 Nginx 整合 -Day 08 先前我们都是...
以本身自家服务器上的 Ubuntu 20.04.2 LTS (GNU/Linux 5.4.0–74-...
基本函数设计 函数基本定义,基本格式如下: def 函数名称 (参数1,参数2,….): 要执行的...
15 天了,没想到过半了,再接再厉~~ 讲了几天的 React , 现在让我们把焦点拉回 React...