接下来要玩 Scale ,讲者提供一个最简单的例子。
左边的方块,Y 值改变的时候,右边的方块的 Scale 值会跟着改变。
另外一个例子,就是手指移动的时候,熊猫眼睛会跟着手指走。(想像一下)
我们要做的第二个模拟行为,就是滑动照片的时候,底下的点会照顺序改变。
回到档案 Onboarding 这个 Scene。
我们好久以前玩过 Paging ,让照片可以滑动。
选择 Paging 这个 Layer。
这次决定直接讲重点,之前写法太冗长。
我们用过 Move 这个 Response,在一般 Trigger 後面(例如 Tap),会有这些移动相关的选项。
但 Paging 後面接的 Move 会长这样,用来绑定两个物件的动作。
因为用的是 iPhone 11 Pro 的宽度 375 px ,我们的 Container 刚好滑一次就是 375 px 的距离。
因此我们 Move 右侧的 Range 1 就会设定 0 和 375 ,也就是滑动照片的距离。
照片滑动的时候要连动的点点在图片下方,而且只有「左右移动」所以只需要改 X 值即可。
点击左侧 dot 们就能看到点跟点之间的距离。
所以我的 X 值就设定为 0 和 20,意思就是上方图片移动 0 到 375 px 时,底下的点会对应移动 0 到 20 px 距离。
按一下 Preview 就能看到图片从第一张移动到第二张,底下的点会同步从第一点移动到第二点。
那如果要让第二张图片到第三张图片也发生第二点到第三点呢?
讲者表达可以完成这个行为的方式很多,大家也可以试试看。
一个就是照抄前面的做法,新增一个 Chain ,让上方图片从 375 px 移动到 750 px 时,底下的点会对应移动 20 到 40 px 距离。
或是根本不新增一个 Chain ,直接接一个 Move 。
这些方法也都能达成,但讲者最後提到一个做法是,回到刚刚做好的第一个 Move ,在右侧选项点下 「+」。
这时就能新增一个 Range 2 。
但眼尖的读者这时候应该发现了,前面讲这麽多,其实很多步骤是多做的。
既然图片移动距离相同,底下点的距离也相同,其实根本就可以直接用图片移动的总距离跟点点的总距离即可。
所以花点时间说明同样一个简单的动作,能这麽多种方式实作出来,把握原则还是最重要的。
然後上传照片常常都会卡住,还是不知道怎麽解,说不定铁人赛有人写 XD
>>: Day18 - 物理模拟篇 - 弹力、引力与磁力III - 成为Canvas Ninja ~ 理解2D渲染的精髓
「闪电 + 疾风的组合吗? 不错不错!」 既然我们之前都说了要用 Vue + Tailwind 来...
GO语言简介 Go(Golang)是Google开发的一种语言。2007年,Google设计Go原先...
在前面章节中,我们已经写过 2 个 hello world作业,接下来要将 hello world...
回到家以後,沉睡又再沉睡的时间大量发生。 平常没有休息的部分,直接从所有内里涌现出来。 即使是平常很...
堆叠定义 具有线性串列结构,资料遵循着先进後出,後进先出的存取顺序 费氏数列(又称黄金分割数) 可以...