有一部分人开始唱衰 Flinto、Principle 等交互工具（包括我自己），但是就目前来说，Principle 等工具还是有不可替代的价值的：单页面联动及多页面动效补帧。欢迎到Macdown.com下载体验！
今天主要讲讲单页面联动和多页面动效原理。
首先上个图，单页面联动是怎样的：
图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的值发生变化），其他元素（设置后变为『联动块』）可以监听该变化，并且设定联动块的属性变化。 还有更多详细、实用的功能以及相关软件Mac获取，大家快来Macdown.com自行探索一番吧。
网友评论