principle动效教程

今天跟大家分享一个简单的交互动效教程，怎么使用principle+sketch制作交互动效。

首先要了解的是principle和sketch只有苹果系统才能使用的软件，所以使用window系统的小伙伴们就有点遗憾了，不过也关系可以先看文中的内容了解一下或先收藏文章，等有苹果电脑了就拿出来再看一遍就好了。

目录：

界面设计

明确交互

图层整理

打开principle

今天要讲的是“卡片滑动”和“按钮点击”变化的效果，接下来就按照上面目录列表进行principle交互动效动制作吧。

界面设计

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

明确交互

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

图层整理

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

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

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

打开Principle

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

2、把卡片1/卡片2/卡片3放置新建文件夹命名滑动， 将卡片2/卡片3向x轴移动375/750个单位，移动后把卡片2/卡片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%）不然就跟关闭按钮重叠了。

好了到这里就已经完成了，赶紧预览一下效果吧！有问题可以评论下方留言。