每周一个前端动画之二：支持率展示动画

就在这样不算浓郁的过年气息中，更新第二篇每周一个前端动画系列。

今天地铁上人明显少了很多，大家相视而笑，互相点头示意但是眼神坚定。因为他们知道，只有共和国最优秀的人才，各部门最重要的岗位才会在这个时候出现在这个车厢里.拖着行李箱的人羞愧的低下了头，但是没有人责怪他们，毕竟每个人的能力都是有限的，与其让他们继续工作，不如放他们回家过年。

本文分析实现的某些效果，仅仅作为一个思路分享，仅仅作为学习素材使用。

源动画效果

结合上一篇的球队logo的展示，在其下方放置了一个bar，用来展示球队的支持率。这条支持率显示bar可以点击，为球队增加支持率。这个效果展示如下：

image

实现分析

经过观察可发现：

• 动画左右对称，实现一边即可
• 点击时支持率的变化是宽度的变化，两方占有的宽度是按照比例（支持人数/总人数）设置的，点击时该队的支持人数和总人数同时改变
• 红蓝相连接的地方是一个斜角，这里的实现可以用到border-width的一个技巧
• 点击是“+1”效果是一个放大动画

分析完这些怎么样，是不是已经有思路了，来让我们看代码。

代码实现

宽度改变效果

注意点击时候需要将支持数和总数同时加1，然后根据此数量修改支持率的宽度。

one.width(oneValue / allVote * 100 + "%");
other.width(100 - oneValue / allVote * 100 + "%");

倾斜角的实现

倾斜角一般我们都是通过-webkit-transform:rotate(xxdeg)实现，但是该方式在设置两个不同颜色时候显得不是那么的方便。上面说到我们可以利用border-width技巧实现这个倾斜角。当我们设置一个元素的width,height都为0的时候，我们设置的border-width将进行占位，该属性设置的值将会平分该块，假如将左右块重复，效果可以展示为如下：

image

这时只要设置其他部分边框的颜色为透明，就可以实现这个倾斜角的效果。

设置代码如下

.team-vs-bar .bar-a:after, .team-vs-bar .bar-b:after {
    position: absolute;
    display: block;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 20px;
    border-color: transparent;
    -webkit-transform: rotate(-15deg)
}

.team-vs-bar .bar-a:after {
    border-top-color: #c93c5d;
    right: -20px;
    top: 0;
    z-index: 1
}

.team-vs-bar .bar-b:after {
    border-bottom-color: #306dca;
    left: -20px;
    bottom: 0
}

“+1”动效的实现

继续使用关键帧，可以进行如下的设置，注意每次点击时候需要将未完成的动画清除掉，只显示最后一次。

@-webkit-keyframes bar_plus {
    0% {
        opacity: 0;
        -webkit-transform: scale(0)
    }
    50% {
        opacity: 1
    }
    60% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.4)
    }
}

效果展示

image

关键点解读

本文的关键点的实现除了“+1”动效，就是倾斜角的实现。“+1”动效依然可以使用关键帧实现，而倾斜角使用after伪类以及border-width的方法进行实现的方式希望可以给大家带来新鲜的感觉。代码已上传到github，欢迎提出Issues。

最后的惯例，贴上我的博客，欢迎关注