本文介绍了如何使用Principle for Mac设计类似探探应用的卡片左右滑动动效。通过分析交互过程，建立图层并利用Mask控制图层，设置Drag属性和Driver面板，实现卡片旋转、底部卡片放大位移以及按钮放大效果。教程详细阐述了每个步骤，帮助读者掌握在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导入。
如上图所示，建立好所有图层
最低0.47元/天 解锁文章
扫一扫
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
