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

无需切图复制黏贴即可。


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

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

三步生成滑动动效。

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

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

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

对组的理解

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

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

理解clip sublates


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

巧用Radius命令。

组的扩展

组中组多级别滑动效果。

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

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

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

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

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

未完待续。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,958评论 19 139
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,170评论 6 13
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,246评论 4 61
  • 天空怎会懂得你的心,只是点点雨滴从天而降,融化为心凉。白夜之中,路在何处,白日的夜,赞叹着,行进着,升华着。触摸不...
    正捌阅读 320评论 15 17
  • 神奇雅丹
    戈壁雅丹阅读 209评论 3 2