卡片是交互循环动效：
1.在sketch制作出所需页面样式，步骤简便，不做详解
2.将card1组设置Driver，前提将组水平竖直设置为Drag（因为是依靠手指拖动实现），然后在Driver中设置角度属性（拓展：Driver界面设置三要素为联动源（即给对象赋予可变属性，如：scroll，drag...），第二，设置可联动属性，即图层自身属性参数，如：X，Y，Height等属性），第三，就是设置联动关键帧）。我这里使用的角度偏移量为12度。
3.card1移走的同时caed2，3，4（card4位隐藏图层）分别移动，结果：card2取代card1的位置（即card2的X，Y，height，width的值在card1运动即将结束后完全相同），card3取代card2.card4取代card3，当卡片向左移动，卡片上的不喜欢图标透明度由0%-100%（在Driver中设置不喜欢图标的Opacity属性由0%-100%），同理，卡片上喜欢图标也设置透明度，具体属性设置如下图：
4.复制airboard1，将card1移除右边画布并且设置其角度为36%（注意：不要将card1移除距离画布太远），将airboard1中的card1的drag end链接到airboard2上，这时，我们的样式大致出来了，细看，下面的喜欢／不喜欢图标在card1移除画布后，变化没有变回来，有一些生硬，这时因为之前设置的Scale属性在设置为1.2之后没有在airboard2中变回来，所以，最简单的方法是：将scale属性在card1移除画布之后在调整会回1，airboard2 Driver设置如下：
5.页面循环：将airboard2中的card2用auto链接到airboard1，这时，你就会出现一个问题：页面跳转不流畅出现了别的东西
解决办法：将 airboard2 到 airboard1 的Animate打开，将所有的动画效果调整为0s即可
6.页面动效展示：
网友评论