抽卡特效小试

译文仅为团队内部分享，对外不对质量负责。

原文链接：Effect Ideas for Card Stacks（作者：Mary Lou）

本文尝试对常见的卡片抽取特效实现正（接受）与反（拒否）的交互。

点此查看范例：http://tympanus.net/Development/CardStackEffects/

期望结果：点击“接受”或“拒绝”按钮，使卡片垛最上层的元素产生相应的动画漂移。（译注：此处删除一句很抽象的前提解释，个人认为可读不可读。）

注意： 部分CSS仅被现代浏览器支持。

卡片与控制钮的代码结构如下：

<ul id="stack_yuda" class="stack stack--yuda">
    <li class="stack__item"><img src="" alt="Tree 1" /></li>
    <li class="stack__item"><img src="" alt="Tree 2" /></li>
    <li class="stack__item"><img src="" alt="Tree 3" /></li>
    <li class="stack__item"><img src="" alt="Tree 4" /></li>
    <li class="stack__item"><img src="" alt="Tree 5" /></li>
    <li class="stack__item"><img src="" alt="Tree 6" /></li>
</ul>
<div class="controls">
    <button class="button button--sonar button--reject" data-stack="stack_yuda">
    <i class="fa fa-times"></i>
    <span class="text-hidden">Reject</span>
    </button>
    <button class="button button--sonar button--accept" data-stack="stack_yuda">
    <i class="fa fa-check"></i>
    <span class="text-hidden">Accept</span>
    </button>
</div>

卡片元素以绝对定位层层覆叠，通过点击按钮对卡片添加accept或reject的class来实现效果。

以下demo使用了一个小插件来辅助功能，Michael Villar写的dynamics.js。移除卡片的动画效果完全依赖CSS。插件内置以下参数：

（注：perspective参考）

Stack.prototype.options = {
    // 默认透视结束点位置（Z轴）
    perspective: 1000,

    // 透视点偏移（X/Y轴）（译注：当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身）
    perspectiveOrigin : '50% -50%',

    // 默认可见卡片数
    visible : 3,

    // infinite navigation
    infinite : true,

    // 到达卡片垛末尾时执行的callback
    onEndStack : function() {return false;},

    // dynamics.js动画参数，具体请参考官方说明 http://dynamicsjs.com/
    // 例:
    // {type: dynamics.spring,duration: 1641,frequency: 557,friction: 459,anticipationSize: 206,anticipationStrength: 392}
    stackItemsAnimation : {
        duration : 500,
        type : dynamics.bezier,
        points : [{'x':0,'y':0,'cp':[{'x':0.25,'y':0.1}]},{'x':1,'y':1,'cp':[{'x':0.25,'y':1}]}]
    },

    // 元素重排延迟值（即stackItemsAnimation作用前的停顿）
    stackItemsAnimationDelay : 0,

    // 元素重排视觉效果设置（接纳+拒否）
    stackItemsPreAnimation : {
        reject : {
            // 是否弹性：如果为真，settings.properties的参数将会以非均等的方式分配到元素上
            // 例：当默认X轴偏移为一百 settings.properties = {translateX:100} ，而默认可视个数 options.visible = 4, 
            // 则元素获得的分配值依次为 100px - 75px - 50px
            elastic : true,
            // dynamics.js 动画函数第2设置值（具体参考 http://dynamicsjs.com/）
            animationProperties : {},
            // dynamics.js 动画函数第3设置值（具体参考 http://dynamicsjs.com/）
            animationSettings : {} 
        },
        accept : {
            / 是否弹性：如果为真，settings.properties的参数将会以非均等的方式分配到元素上
            // 例：当默认X轴偏移为一百 settings.properties = {translateX:100} ，而默认可视个数 options.visible = 4, 
            // 则元素获得的分配值依次为 100px - 75px - 50px
            elastic : true,
            // dynamics.js 动画函数第2设置值（具体参考 http://dynamicsjs.com/）
            animationProperties : {},
            // dynamics.js 动画函数第3设置值（具体参考 http://dynamicsjs.com/）
            animationSettings : {}
        }
    }
}

相应的动画样式：

/***********************************************/
/******************** yuda *********************/
/***********************************************/

.stack--yuda .stack__item--reject {
    -webkit-animation: yudaReject 0.5s forwards;
    animation: yudaReject 0.5s forwards;
}

@-webkit-keyframes yudaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }
}

@keyframes yudaReject {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }
}

.stack--yuda .stack__item--accept {
    -webkit-transform-origin: 50% 300%;
    transform-origin: 50% 300%;
    -webkit-animation: yudaAccept 0.5s forwards;
    animation: yudaAccept 0.5s forwards;
}

@-webkit-keyframes yudaAccept {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 20deg);
        transform: rotate3d(0, 0, 1, 20deg);
    }
}

@keyframes yudaAccept {
    to {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 20deg);
        transform: rotate3d(0, 0, 1, 20deg);
    }
}

例中所用树木矢量图来自Freepik：http://www.freepik.com/free-photos-vectors/tree

Demo：http://tympanus.net/Development/CardStackEffects/
代码包：http://tympanus.net/Development/CardStackEffects/CardStackEffects.zip