让Principle成为生产力工具(二)单页面中的联动

664 阅读4分钟
原文链接: www.ui.cn

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

写在前面的话:

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


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



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



首先上个图,单页面联动是怎样的:

Image title

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


单页面联动效果原理:

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


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

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

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


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


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

Image title

联动效果的种类


案例:

Image title


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



第一步、准备两个块

Image title



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


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

Image title



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

Image title


设置滚动前:啥也没有

Image title


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

Image title


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

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



正式的来了


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


1、点击选中联动块(一定要选中联动块)

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

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

Image title


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

这里的意思是:当主动块的 X轴 位移为0时,联动块的圆角(半径)为 0。

Image title



第四步、关联


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


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


拖动到80后,选中『联动块』设置联动块的圆角属性值为:40;


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


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

Image title


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



总结:


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



下一篇:多页面跳转动效原理


简单先说下多页面原理:多页面动效产生的原因是,两个页面中都有一个文件名称叫做『小方块』,但是他们有些属性不同,比如:在 A页面『小方块』的X轴的位置是80,在B页面『小方块』的位置是100,那么当页面从A跳到B时,小方块就会发生位移,且这个位移是平缓的,这是因为Principle会帮你补齐中间漏掉的变化效果。


中间帧补齐是 Principle 相比于 Sketch新版功能的优势所在。