轻松使用Principle,初学者的简单技巧。

无需切图复制黏贴即可。


从sketch里复制进入principle后,元素默认成为图片,可以复制组或者单独组件。

通过调节数值,运用运用对齐命令,使其位置与sketch中相同。(可利用命名达到位置完全对应,详见下期。)

三步生成滑动动效。

1:需要滑动部分成组。   2:为组指定上下滑动方式为scroll。   3:修改组的边界,下端小于等于屏幕。

注意:同时为“组”和“组内物体”指定滑动属性,那么“组”将不可移动。

详解:此时“组”可以理解成一个动效元素,为其指定滑动形式,“组”内所有物体均拥有滑动动画属性。当“组”被指定滑动属性后,“组”内单个物体也可以被指定同样的滑动属性,这样设置,整个组由于属性矛盾而被固定在原地,但“组”仍然具有可被移动属性。这个技巧在之后制作复杂动效时候运用。(今后将有详解)

对组的理解

组的特色:组的边界可以自由移动。

配合clip sublates可实现剪切效果(clip sublates:控制显示和隐藏“组”边界外的内容。)

理解clip sublates


Radius命令控制圆角大小,可利用这个命令作出圆形。“组”同样受这个命令控制,可制作圆形剪切物体。

巧用Radius命令。

组的扩展

组中组多级别滑动效果。

1.三部创建整组滑动效果。调节组的边界与屏幕大小相等。

2.选择组内物体新建组,赋予新组左右滑动效果,滑动方式选择“page”,调节组的边界与图片相等。

注意:同一个组内可拥有若干组和物体,他们可共同完成这个动效。父级组会带着子级组内物体一起运动,子级组可具有新的运动方式,且不影响父级组。

父级组内同时有两张图片做相同动效,此时需要让着两张图片在一个子级组中。

注释:从新理解组的边界,在赋予组滑动效果时,组的边界决定了滑动的范围...

未完待续。

推荐阅读更多精彩内容