用Principle制作卡片左右划动动效#Principle教程

Posted 2023-04-27

参考技术A

这期教大家制作Principle官网上第二个示例。

这个很像探探和Badoo那种卡片交互，我们先看下探探里面的这种交互是什么样的。

为了控制上传gif的大小，这里简单做了一个demo，看下最终效果：

我们首先来分析下整个交互的过程。

手指左划时：

1. 当前卡片逆时针旋转一定角度，卡片右上角出现dislike的icon；
2. 底部的卡片依次变大并位移至其上一层卡片的坐标位置；
3. 底部dislike按钮变大；

手指右划时：

1. 当前卡片顺时针旋转一定角度，卡片右上角出现like的icon；
2. 底部的卡片依次变大并位移至其上一层卡片的坐标位置；
3. 底部like按钮变大；

这次的demo我们主要会用到Driver，也就是当前页面自身的交互动作，开始。

由于这一次画板上的元素稍微有点多，我们可以在sketch里面完成所有图层的绘制，再用Principle导入。

Principle源文件链接
提取码：ut5e

如上图所示，建立好所有图层，其中可以发现其中有四个编组我是用了Mask。

Tip：Principle导入Sketch文件时，会保留Sketch里面除Mask编组外的所有图层。而带有Mask的那个一编组无论编组里面实际上有多少图层，都只会被当成一个图片图层。

我们可以利用这一点，灵活控制我们在导入Principle时的图层数量，而不用在Sketch文件里面做合并或删减。

比如当我们在做高保真的demo时，某个列表编组里面的图层有很多，而其实际上只需要实现其Scroll的效果。如果直接导入到Principle里面，那这个编组里面的图层数量就会完全被继承，而且图层名非常容易混乱，要知道Principle就是通过图层名去判断图层的，所以很容易出错。这时候我们只需要给这个列表编组添加一个等大的Mask图层置于编组最底层，导入Principle时这个列表编组就变成了一个单独的图片图层。

Tip：Principle可以继承Sketch图层的Shadow效果，包括填充色、X、Y、Blur，而Spread不可被继承。
Principle只能继承Sketch图层填充模式为Flat Color，其余填充模式都会被转化成图片图层。
Principle不能继承Sketch图层的圆形图层，如果想正圆图层导入Principle后能继续被编辑，请用圆角矩形去实现。

全部完成后不要关闭Sketch，打开Principle，点击工具栏的钻石按钮，导入Sketch。可以看到button like、button dislike、icon like、icon dislike因为是Mask编组，所以都被转化成了一个单独的图片图层。

实际案例中的卡片是可以被随意拖拽的，这时候我们选中card 1编组，将其编组水平（Horizontal）和垂直（Vertical）的属性改为拖拽（Drag）。

Tip：可以将预览窗口固定在屏幕右边。View->Side By Side

这时候点击工具栏的Driver，发现出现了两条Driver面板，且面板上名称都为card 1。这是因为当前画板Artboard 1中只有card 1存在可交互属性，而card 1在X轴和Y轴上都具有Drag交互属性，因此就会分别有两个Driver面板。而当前指针在180的位置标明card 1在默认状态下的时间轴位置是180。

随意拖动指针你会发现card 1会随着拖动而移动，实例中卡片会随着左右划动而旋转一定角度，因此我们选中card 1，在X轴的Driver面板中，点击card 1右边的“+”图标，添加一个Angle属性的节点。

将指针移动到360的位置，继续添加一个节点，同时给card 1设置12°的Angle。再将指针移动到0的位置，继续添加一个节点，同时给card 1设置-12°的Angle。看下效果：

由于icon like和icon dislike都是在左右划情况下才会出现，因此我们要分别为它们添加Opacity的属性变化。

同时选中icon like和icon dislike，在180位置上添加Opacity，并将二者的Opacity设为0%。

在260位置上为icon like添加一个节点，Opacity设为100%，在100位置上为icon dislike添加一个节点，Opacity设为100%。看下效果：

可以发现实现了左划显示icon dislike，右划显示icon like，且两个icon会随着card 1旋转而旋转。

Tip：编组内的图层会随着编组的属性变化而变化，包括：Angle、Scale、Opacity。

实例中，底部的卡片会随着左右划动依次变大并位移至其上一层卡片的坐标位置，同时底部的按钮也会随着左右滑动而分别放大。

由于页面中最多只显示三个卡片，因此card 4在默认状态也就是180位置时，不透明度应该是0%的，在目标节点时不透明度才变为100%。

card 2、card 3要实现放大并位移的效果，涉及到的属性变化包括：X、Y、Width、Height。

底部按钮放大的效果可以通过Sacle属性变化来实现。

为card 2、card 3在180位置上分别添加X、Y、Width、Height节点、card 4添加Opacity节点，button like、button dislike分别添加Scale节点。

以右划为例，在300位置上继续添加节点：

效果如下：

继续添加左划过程中的节点，效果如下：

为了整个demo更加真实，我们可以为card 1添加交互动作，让其在拖拽结束时消失，同时页面回到默认状态。

command+d复制画板，在Artboard 2上将card 1移出画板可视范围并设置Angle为36°，在Artboard 1中选中card 1，添加Drag End交互动作并链到Artboard 2。

看下效果：

这时候会发现，由于Artboard 2继承了Artboard 1的Driver，因此跳转后button like并没有缩小回原状。

这是因为在Artboard 2上移动和旋转card 1时，Driver上会根据card 1移动的位置自动为card 1的X轴上生成新节点。而此时Artboard 2是处于566位置状态的，此时card 2是移出画板了，但是button like还是保持1.12的Scale状态。

解决方法有几种：

Tips：由于Principle里面没有Axure的那种条件判断功能，因此判断不了拖拽结束时card 1是往左边消失还是右边消失。因为为了方便演示，做demo时，相同的交互形式，只需演示一种情况就好。

最终效果：

下期会教大家实现官网上的第三个示例 下期见

非常感谢您的阅读，您的支持是我最大的动力！

Principle教程：用Principle做卡片翻转动效

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

https://www.macdown.com

此次小编就带大家来了解下用Principle做卡片翻转动效！

一、原理

首先讲一下这个动效的原理，简单来说就是：面变成线，线再变成面。先是正面，由面收缩成竖着的一条线，然后是背面，由竖着的一条线伸展成面。

如下图：

连起来做成效给人的感觉就是翻转了一下，如下图：

二、具体步骤

1、第一步

Principle 可以直接导入 sketch 画板，所以第一步在 sketch 里把素材准备好，需要准备的东西：2个正面卡片、2个反面卡片，分别装在4个画板中。如下图所示：

然后打开 Principle -点击左上角的导入按钮-导入页面，如下图：

导入进来后是这样子的，如下图：

2、第二步

找到页面左下角的图层区域，把名字全部改成一样的。不同画板中的元素，只有名字相同，才能形成补间动画。如下图：

我们前文说过原理，所以它的变化顺序应该是：面-线-线-面。所以要把画板2、3 中的扑克牌，变成一条线，具体操作就是把他们的宽度变成1。

别忘了居中对齐一下，由于宽度变成1，所以画板2和3在图层区域已经看不到东西了。如下图：

3、第三步

点击第一个画板中的扑克牌，会出来一个“小闪电”按钮，点击它，在弹出的弹窗中选第一个“点击”，长按拖到第二个画板上。

然后点击第二个画板的黑色区域，整个画板右边，会出现一个“小闪电”标志，这次在弹窗中选最后一个“自动”，也是长按它拖拽到第三个画板上。

重复上一步操作，在第三个画板处选择“自动”-拖到第四个画板上，大功告成。

4、小结

画板1 到画板2 选择“点击”，画板2 到画板3 再到画板4，都选择“自动”。然后页面的右上角有预览窗口，可以在里面通过点击预览做好的动效。如下图：

5、导出

点击预览窗口的“摄像头”图标，可以录制视频，然后可以导出视频格式，也可以导出 GIF 格式。

三、细节

敲黑板，有没有觉得这个动效看起来比较单调？其实我们可以给它增加一些变化，让它看起来更有层次感。比如加上缩放和阴影的变化。具体操作如下：

1、阴影

为了让动效有个阴影过渡的变化，每个画板里的扑克牌都加上黑色遮罩，要和扑克牌的尺寸相对应，该面的面，该线的线。然后遮罩的透明度依次是：画板一0%、画板二90%、画板三90%、画板四0%。别忘了名字要改成一模一样，弄完以后是这样的（添加矩形的方法和 sketch 一样，如果是不规则图形，也可以直接把做好的阴影图片拖进 Principle）,如下图：

2、缩放

加完阴影，再加缩放变化，具体操作是：选中画板一、画板二里的全部元素，把比例都改为0.8倍大小，如下图：

然后去预览里点击看一下效果：

四、缺点

我们都知道，眼睛看到的事物都遵循着透视原理，即近处的事物看起来大，远处的事物会看起来小，这种方法的缺点就是没有透视效果，失去了一些空间上的立体感。

五、总结

今天主要讲的一件事是用 Principle 做卡片翻转动效，有3点，名字一定要保持一致，才能形成补间动画；添加阴影和缩放变化，能让动效更有层次感；这个动效做起来比较简单，但没有透视效果。以上就是小编为大家带来的Principle教程：用Principle做卡片翻转动效。还有更多详细、实用的功能以及相关软件Principle和其他Mac软件获取，大家快来Macdown.com自行探索一番吧。