连续 30 天 玩玩看 ProtoPie - Day 18

接下来要玩 Scale ,讲者提供一个最简单的例子。

左边的方块,Y 值改变的时候,右边的方块的 Scale 值会跟着改变。

https://ithelp.ithome.com.tw/upload/images/20211003/201419418xsSRICmfb.png

https://ithelp.ithome.com.tw/upload/images/20211003/201419417EJ9TbtAyA.png

另外一个例子,就是手指移动的时候,熊猫眼睛会跟着手指走。(想像一下)

https://ithelp.ithome.com.tw/upload/images/20211003/20141941dfg7R3Z6Ae.png

模拟滑动画面时,下方的点点变换位置 (使用Chain)

我们要做的第二个模拟行为,就是滑动照片的时候,底下的点会照顺序改变。

回到档案 Onboarding 这个 Scene。

https://ithelp.ithome.com.tw/upload/images/20211003/201419415Fy1oTzabG.png

我们好久以前玩过 Paging ,让照片可以滑动。

选择 Paging 这个 Layer。

https://ithelp.ithome.com.tw/upload/images/20211003/20141941ZcRksKtq26.png

这次决定直接讲重点,之前写法太冗长。

我们用过 Move 这个 Response,在一般 Trigger 後面(例如 Tap),会有这些移动相关的选项。

https://ithelp.ithome.com.tw/upload/images/20211003/20141941Mg5a8SoOee.png

但 Paging 後面接的 Move 会长这样,用来绑定两个物件的动作。

https://ithelp.ithome.com.tw/upload/images/20211003/20141941tDKn7xLekl.png

因为用的是 iPhone 11 Pro 的宽度 375 px ,我们的 Container 刚好滑一次就是 375 px 的距离。

https://ithelp.ithome.com.tw/upload/images/20211003/2014194188RJXD1i1p.png

因此我们 Move 右侧的 Range 1 就会设定 0 和 375 ,也就是滑动照片的距离。

https://ithelp.ithome.com.tw/upload/images/20211003/201419411VKzN1Srx6.png

照片滑动的时候要连动的点点在图片下方,而且只有「左右移动」所以只需要改 X 值即可。

点击左侧 dot 们就能看到点跟点之间的距离。

https://ithelp.ithome.com.tw/upload/images/20211003/20141941pAshjgv3z8.png

所以我的 X 值就设定为 0 和 20,意思就是上方图片移动 0 到 375 px 时,底下的点会对应移动 0 到 20 px 距离。

https://ithelp.ithome.com.tw/upload/images/20211003/201419416qrYjoWOFL.png

按一下 Preview 就能看到图片从第一张移动到第二张,底下的点会同步从第一点移动到第二点。

https://ithelp.ithome.com.tw/upload/images/20211003/20141941rbO5AgVIbI.png

那如果要让第二张图片到第三张图片也发生第二点到第三点呢?

讲者表达可以完成这个行为的方式很多,大家也可以试试看。

一个就是照抄前面的做法,新增一个 Chain ,让上方图片从 375 px 移动到 750 px 时,底下的点会对应移动 20 到 40 px 距离。

或是根本不新增一个 Chain ,直接接一个 Move 。

这些方法也都能达成,但讲者最後提到一个做法是,回到刚刚做好的第一个 Move ,在右侧选项点下 「+」。

https://ithelp.ithome.com.tw/upload/images/20211003/20141941ocS53UXVCR.png

这时就能新增一个 Range 2 。

https://ithelp.ithome.com.tw/upload/images/20211003/20141941VtBEyIxmDF.png

但眼尖的读者这时候应该发现了,前面讲这麽多,其实很多步骤是多做的。

既然图片移动距离相同,底下点的距离也相同,其实根本就可以直接用图片移动的总距离跟点点的总距离即可。

https://ithelp.ithome.com.tw/upload/images/20211003/20141941Atb4nCeCx1.png

所以花点时间说明同样一个简单的动作,能这麽多种方式实作出来,把握原则还是最重要的。

然後上传照片常常都会卡住,还是不知道怎麽解,说不定铁人赛有人写 XD


<<:  【D19】尝试料理#2:取得所有指数清单

>>:  Day18 - 物理模拟篇 - 弹力、引力与磁力III - 成为Canvas Ninja ~ 理解2D渲染的精髓

Day 18:「极速开发」- Vitawind

「闪电 + 疾风的组合吗? 不错不错!」 既然我们之前都说了要用 Vue + Tailwind 来...

[Day 2] -『 GO语言学习笔记』- GO语言简介

GO语言简介 Go(Golang)是Google开发的一种语言。2007年,Google设计Go原先...

[GAS] GBC上运作的Hello world!

在前面章节中,我们已经写过 2 个 hello world作业,接下来要将 hello world...

矛盾睡眠的断面

回到家以後,沉睡又再沉睡的时间大量发生。 平常没有休息的部分,直接从所有内里涌现出来。 即使是平常很...

堆叠 - 递回 - 费氏数列 - DAY 7

堆叠定义 具有线性串列结构,资料遵循着先进後出,後进先出的存取顺序 费氏数列(又称黄金分割数) 可以...