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

Principle for Mac是一款全新开发的交互设计软件。与 Pixate 相比，它更易于使用。界面类似于Sketch等绘图软件。思路有点像用Keynote做动画，比较“形象”。如果你没有合适或者喜欢的交互式原型制作软件，可以考虑这个Principle for Mac！

这次小编就带大家看看Principle是如何制作“卡片滑动”和“按钮点击”的效果的。这次小编就带大家看看Principle是如何制作“卡片滑动”和“按钮点击”的效果的。

界面设计

我这里使用了 iPhone x (375x812) 的设计尺寸。为了后面更好的跟进流程，最好使用375x812的设计尺寸，因为后面做动画效果会用到一些参数。界面设计如下图所示。

明确的互动

根据界面设计，这里要实现的交互动效是#主题卡片滑动背景颜色随主题颜色变化##继续钢与卡更改##点击右下按钮展开信息#，这就是我们要的动画原则上实行后效。

图层组织

1、根据要实现的交互动态效果，将所有页面内容排列在一个画板上（命名为页面1），分别按照卡片1/卡片2/卡片3命名滑动卡片图层。

2.滚动条按照点1/点2/点3命名

3、点击按钮展开信息先隐藏，展开信息左侧各层元素不透明度为0%。

开放原则

1、导入刚刚整理好的第1页，导入Sketch中选中的画板（第1页）

2.将Card 1/Card 2/Card 3放入新文件夹，命名为slide，将Card 2/Card 3向x轴方向移动375/750个单位，移动后去除Card 2/Card 3的背景图层滑动怎么做，和卡片 1 的背景将幻灯片层放在底部。

3、按图中指示操作。设置完成后可以预览效果，但背景颜色不会改变，请继续阅读。

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

5.设置滚动点，现在删除点2/点3的滚动点，复制点1的滚动点命名为点2/点3，移动到合适的位置

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

6、现在点击右下角的展开功能按钮滑动怎么做，复制第1页，命名为第2页，第2页会显示之前隐藏的展开信息（不透明度100%）

然后根据设计效果图调整展开信息的位置

接下来点击按钮切换状态，选中按钮图层，点击闪电图标选择tap（点击）箭头指向第2页，点击第2页关闭箭头指向第1页，记得隐藏第 2 页上的按钮层（不透明度 0%），否则与关闭按钮重叠。

好了，到这里就完成了，我们赶紧预览一下效果吧！

以上就是小编为大家带来的原理实例教程：如何制作“卡片滑动”和“按钮点击”变化的效果。还有更详细实用的功能，还有相关软件原理等Mac软件的获取。自己来探索吧。