“拖动”是卡片式设计中一种常见的交互，属于“即时交互”。即时交互指的是在操作进行的时刻即有反馈，非即时交互则是在人的操作结束后物体才有反应，比如按钮的点击、卡片翻转等。
在实际的设计中，很多地方会用到“拖拽”的手段给用户带来更佳的效果，可以说，在拖动启动的一瞬间，用户就明白了这样操作的结果，同时，他也可以“反悔”——放回原处，这样就可以防止误解和操作失误，增加了产品的容错性👍
最终效果
1. 拖动card 1离开原位，添加处颜色变深；
2. card 1拖进添加处范围时新的添加位（加号）出现，添加处整体底色变浅；
3. 在添加处松开card 1，底色改变，card 1出现在添加位上，card 2, card 3左移补位，同时新的添加处在下方出现。
首先，在Sketch中用简单的图形画好所有出现的页面。
因为拖拽这一个动作会导致添加处出现两种状态，即未进入时的底色变深和进入时的底色变浅、添加位显现，因此两个状态都在第二帧中，只是在不同触发条件下透明度不同（后面会说明怎么处理）：
下面分析每一步效果的实现。
1. 拖动card 1离开原位，添加处颜色变深
设置卡片为水平和垂直方向的drag交互，drag和page, scroll 不同，不存在父子图层的滑动关系，只是图层本身的动作，因此不需要driver实现。
拖拽卡片到未到达区域（添加处以外的地方），松开回到原处；妥当到添加处，松开则放置在添加位上。这有点像程序中的“if...else...”语句，在Principle中虽然没有这样的规则，但可以用图层之间跳转的优先级来解决：
在第二帧中用整个artboard的hover inside跳转到第一帧，而用添加区域的hover inside跳转到第三帧（添加完成状态）。这点利用了“内部区域的优先级大于整体”的方法，如果在局部松开就跳转局部，在其它区域松开就跳转整体。如果拖拽时鼠标在添加处松开，就认为是添加动作，跳转到添加状态。也不是很难吧？
2. card 1拖进添加范围时添加位出现，添加处整体底色变浅
因为是卡片的位置导致添加位的不同状态，这里用卡片的X/Y的联动（driver）实现。设置card 1的Y为因变量，添加位、添加层、原始文字、原始层为变量，进行透明度的变化。注意，在card 1刚好进入/退出区域处，透明度实际为突变（0%到100%，100%到0%），要分别设置两个状态，一共是四个状态，否则边界处只有一个状态，就会变成内部的渐变效果：
card 1 的Y变化带来的驱动效果
3. 在添加处松开card 1，底色改变，card 1出现在添加位上，card 2, card 3左移补位，同时新的添加处在下方出现
最后的动效就很简单了，“松开后出现在添加位”在上一步已经实现，card 2, card 3的移动只需要在第三帧中手动移动卡片，补上card 1位置即可。动画自动识别出它们X的变化：
整体来说，拖拽（drag）的开始、结束效果有些难度，利用到了drivers的相关知识。动效本身是值得一试的，也是交互闪光🌟的地方。
原型请见：https://pan.baidu.com/s/1i5Hvfud
密码：8xkt
网友评论