Principle实例教程：如何制做“卡片滑动”和“按钮点击”变化的效果

Principle for Mac是一款新开发的交互设计软件。相比 Pixate 更容易上手，界面相似 Sketch 等作图软件，思路有点像用 Keynote 作动画，更「可视化」一些。若是您尚未合适的或者喜欢的交互原型设计软件，能够考虑一下这一款Principle for Mac！

这次小编来带你们看看，Principle是如何作“卡片滑动”和“按钮点击”变化的效果，Macdown.com提供软件获取。

界面设计

我这里使用了iPhone x的设计尺寸（375x812），为了后面能更好的按照流程走，最好都是用375x812设计尺寸，由于后面制做动效会使用到一些参数。界面设计如图下所示。

明确交互

根据界面设计，这里要实现的交互动效是#主题卡片滑动背景色随主题色变# #滚动条随卡片变化# #点击右下按钮展开信息#，这就是咱们待会要在principle实现的动效。

图层整理

一、根据要实现的交互动效，把全部页面内容整理在一个画板里（命名页面1），滑动卡片图层分别按卡片1/卡片2/卡3命名好。

二、滚动条就按点1/点2/点3命名好

三、点击按钮展开的信息先隐藏，展开信息放置左边每一个图层元素不透明度为百分之0

打开Principle

一、导入刚刚整理好的页面1，导入sketch里选中的画版（页面1）

二、把卡片1/卡片2/卡片3放置新建文件夹命名滑动， 将卡片2/卡片3向x轴移动375/750个单位，移动后把卡片2/卡片3背景图层去掉，卡片1背景放置滑动图层底部。

三、按图中指示操做，设置完后，就能够预览一下效果了，可是背景色还不会变，请继续往下看吧。

四、选中背景图层，在联动窗口设置填充，而后移动时间轴设置卡片2/卡片3关键帧，再次预览效果背景就有了变化了。

五、设置滚动点，如今把点2/点3滚动点删除，把点1滚动点复制两个命名为点2/点3，移动到合适位置

选中点1/点2/点3图层，在联动窗口设置缩放和不透明度（scale/opacity），当前点1参数(scale 1/opacity 100%)，那么点2/点3 就是0.6和50%，点的缩放不透明度随时间轴变化设置

六、如今要点击右下方按钮展开功能，因此把页面1再复制一个命名为页面2，页面2把以前隐藏的展开信息显示出来(不透明度为100%)

而后将展开信息按设计效果图调整位置

下面作点击按钮切换状态，选中按钮图层，点击闪电图标选择tap(点击)将箭头指向页面2，一样的在页面2点击关闭将箭头指向页面1，页面2按钮图层记得隐藏（不透明度0%）否则就跟关闭按钮重叠了。

好了到这里就已经完成了，赶忙预览一下效果吧！

以上就是小编为你们带来的Principle实例教程：如何制做“卡片滑动”和“按钮点击”变化的效果。