Principle教程：如何制作卡片左右划动动效

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

5分钟制作探探卡片左右划动动效，示例如下：

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

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

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

手指左划时：

1. 当前卡片逆时针旋转一定角度，卡片右上角出现dislike的icon；

2. 底部的卡片依次变大并位移至其上一层卡片的坐标位置；

3. 底部dislike按钮变大；

手指右划时：

1. 当前卡片顺时针旋转一定角度，卡片右上角出现like的icon；

2. 底部的卡片依次变大并位移至其上一层卡片的坐标位置；

3. 底部like按钮变大；

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

步骤1：建立好图层，灵活运通Mask控制图层

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

如上图所示，建立好所有图层，其中可以发现其中有四个编组我是用了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编组，所以都被转化成了一个单独的图片图层。

步骤2：实现card 1左右滑动效果

实际案例中的卡片是可以被随意拖拽的，这时候我们选中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。

步骤3：实现底层卡片放大位移及底部按钮放大效果

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

由于页面中最多只显示三个卡片，因此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位置上继续添加节点：

1.card 2的X、Y、Width、Height属性改为同card 1一样；

2.card 3的X、Y、Width、Height属性改为同card 2一样；

3.card 4的Opacity改为100%；

4.button like的Sacle变为1.12。

效果如下：

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

步骤4：实现拖拽结束跳转效果

为了整个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状态。

解决方法有几种：

1.不改变Artboard 2的Driver位置，将button like在Driver上的时间轴删除，并恢复Scale为1；

2.不改变Artboard 2的Driver位置，在300位置时将button like的Scale设置为1；

3.将Artboard 2的Diver位置调整到180，在180位置时将card 1移出画板可视范围；

4.删除Artboard 2上所有的Driver属性，并按Animate逻辑在Artboard 2给各个图层设定好对应的属性。

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

最终效果：

以上就是小编为大家带来的Principle教程：如何制作卡片左右划动动效。还有更多详细、实用的功能以及相关软件Principle和其他Mac软件获取，大家快来Macdown.com自行探索一番吧。

Principle教程：如何制作卡片左右划动动效相关推荐

如何使用Principle for Mac制作卡片左右划动动效
Principle for Mac是很好的动画交互设计软件,从您的喜爱导入您的设计工具,您的设计又为您注入新的活力,同时有快捷键帮助您更好更快的完成您的设计,是非常棒的一款交互设计工具.今天为大家带来 ...
Maya教程-XGEN制作毛发技能学习 Patreon – Cartoon Grooming Series by Jesus FC
Maya教程-XGEN制作毛发技能学习 Patreon – Cartoon Grooming Series by Jesus FC Maya教程-XGEN制作毛发技能学习 Patreon – Cart ...
【干货】Sketch+Keynote双剑合璧：5步快速制作移动动效
送给真正的互联网人一顿干货早餐 [小咖导读]2014年,Facebook推出了新闻阅读应用Paper,诸多交互细节与炫酷动效启动了界面设计的新时代,Google的Material Design更是将移 ...
AI+PS教程！制作油画质感早餐插画
如何制作插画?ps和ai怎么结合使用?为您带来AI+PS教程!制作油画质感早餐插画! 步骤 01 场景分析画面由甜甜圈.牛奶.饮料以及好看的绿植物组成,配色色卡如下: 步骤 02 新建文档 (1)打 ...
videoleap自带素材_videoleap教程：制作电影帷幕开场效果细解
大家晚上好,我是Mr.吴劳模吴又熬夜来给大家更新教程了今天给大家带来的教程是 --如何制作电影开场的效果这里我先放一个上周末出去约拍记录的一个vlog成品杭州印打卡--WABF小分队https ...
HTML文件均以()标记符开始,助理电子商务师教程网页制作
助理电子商务师教程网页制作助理电子商务师教程,国家职业资格三级,第一章网页制作,第一节 HTML语言一.页面布局二.文字与表格第二节动态网页制作一.编辑图像二.视频与音频,第一节 HTM ...
html怎么制作小黄人,【PS教程】制作一个小黄人
原标题:[PS教程]制作一个小黄人小黄人已经是个无需介绍的人气角色,呆萌的外表让他成为了践踏主角的超级巨星,在全球拥有无数粉丝,作为喜欢小黄人的设计师,是不是一定要懂得3D软件才能做出小黄人哩?NO ...
【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开效 ...
Unity教程之-制作闪亮的星星Star（二）：创建Shader
继续上篇文章<Unity教程之-制作闪亮的星星Star(一):动态的创建Mesh>我们建立一个新的Shader将它命名为Star,然后写入以下代码. 什么是CGPROGRAM? Basic ...

Principle教程：如何制作卡片左右划动动效

Principle教程：如何制作卡片左右划动动效相关推荐

最新文章

热门文章