每週一個前端動畫之二：支援率展示動畫

秋染蒹葭發表於2019-03-01
前端動畫

就在這樣不算濃郁的過年氣息中，更新第二篇每週一個前端動畫系列。

今天地鐵上人明顯少了很多，大家相視而笑，互相點頭示意但是眼神堅定。因為他們知道，只有共和國最優秀的人才，各部門最重要的崗位才會在這個時候出現在這個車廂裡.拖著行李箱的人羞愧的低下了頭，但是沒有人責怪他們，畢竟每個人的能力都是有限的，與其讓他們繼續工作，不如放他們回家過年。

本文分析實現的某些效果，僅僅作為一個思路分享，僅僅作為學習素材使用。

源動畫效果

結合上一篇的球隊logo的展示，在其下方放置了一個bar，用來展示球隊的支援率。這條支援率顯示bar可以點選，為球隊增加支援率。這個效果展示如下：

每週一個前端動畫之二：支援率展示動畫

實現分析

經過觀察可發現：

  • 動畫左右對稱，實現一邊即可
  • 點選時支援率的變化是寬度的變化，兩方佔有的寬度是按照比例（支援人數/總人數）設定的，點選時該隊的支援人數和總人數同時改變
  • 紅藍相連線的地方是一個斜角，這裡的實現可以用到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將進行佔位，該屬性設定的值將會平分該塊，假如將左右塊重複，效果可以展示為如下：

每週一個前端動畫之二：支援率展示動畫
這時只要設定其他部分邊框的顏色為透明，就可以實現這個傾斜角的效果。

設定程式碼如下

.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)
    }
}
複製程式碼

效果展示

每週一個前端動畫之二：支援率展示動畫

關鍵點解讀

本文的關鍵點的實現除了“+1”動效，就是傾斜角的實現。“+1”動效依然可以使用關鍵幀實現，而傾斜角使用after偽類以及border-width的方法進行實現的方式希望可以給大家帶來新鮮的感覺。程式碼已上傳到github，歡迎提出Issues。

最後的慣例，貼上我的部落格，歡迎關注

相關文章