principle导出html5,让Principle成为生产力工具（二）单页面中的联动

Sketch49更新了link功能，但是中间帧补齐才是 Principle 相比于 Sketch新版功能的优势所在。

写在前面的话：

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

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

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

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

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

单页面联动效果原理：

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

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

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

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

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

联动效果