Principle制作单页面中的联动

Sketch49 正式发布了，在新的版本中加入了期待已久的  Link(链接)  功能，目前仅支持点击跳转指定页面。关于这个功能，已经有很多文章写了，我也不再赘述了。

有一部分人开始唱衰 Flinto、Principle 等交互工具（包括我自己），但是就目前来说，Principle 等工具还是有不可替代的价值的：单页面联动及多页面动效补帧。

今天主要讲讲单页面联动和多页面动效原理。

首先上个图，单页面联动是怎样的：

图1：当你操作页面中的一个元素时，其他的元素会同时动起来

单页面联动效果原理：

监听页面中的 A元素的 X 轴或者 Y 轴位置的变化，如：当 A元素从 X 轴位置发生变化时，B元素的属性同时发生变化。

如图1：当列表中列表左右滑动时（ X 轴位移）：

1、导航栏的小黄块在同时左右滑动（ X 轴位移）

2、『产品经理』、『UI设计师』不透明度在发生变化

Pps：想要执行联动操作时，页面中必须有一个元素设置了『Drag：拖拽』、『Page：页面』、『Scroll：滚动』任意效果。

联动效果时，可设置的属性有以下几种：

联动效果的种类

案例：

当页面中『主动块』左右滑动时，『联动块』的半径发生变化

第一步、准备两个块

第二步、给主动块设置 X 轴（水平方向）的滚动效果

设置滚动效果后，主动块会自动创建一个文件夹（原因看上一篇文章）。

当你设置完主动块的滚动效果后，顶部栏不发生变化，点击顶部栏『联动』按钮，会展开一个界面。

设置滚动前：啥也没有

设置滚动后：多出一个『主动块-组』X轴变化（水平位移）的监听条

这个条的作用，你点击『0』对应的块，左右拖动，会发现，『主动块』也在左右滑动。

注：动的不是『主动块-组』，设定滚动效果时，动的都是文件夹内部的元素。

正式的来了

第三步、设定联动块的需要变化的属性

1、点击选中联动块（一定要选中联动块）

2、联动区域会出现一栏名为『联动块』的条目，点击 + 号

3、在弹出框中选择『半径』（我们要设置的是半径变化）

设置完成后，页面会多出一个『联动块』的条目，并且有一个半径的属性。

这里的意思是：当主动块的 X轴 位移为0时，联动块的圆角（半径）为 0。

第四步、关联

联动区之前有个『0』的块，点击拖动到 80 的位置，你会发现，画面中的『主动块』向左移动了 80。

这个操作代表，当主动块向左移动 80 的距离。

拖动到80后，选中『联动块』设置联动块的圆角属性值为：40；

整个操作带来的结果就是：当主动块向左移动 80 时，联动块的圆角会从 0 变成 40。

注：整个过程不是瞬间的，而是缓慢变化的，Principle会自动帮你补齐从0到80的过程中，圆角是如何变化的。

如果要向右滑动，设置负值即可。

总结：

当页面中的『主动块』发生 X轴或 Y轴的相对运动时（即X或Y的值发生变化），其他元素（设置后变为『联动块』）可以监听该变化，并且设定联动块的属性变化。 

未经允许不得转载：搬瓦工VPS_美国VPS » Principle制作单页面中的联动