每週一個前端動畫之三：twitter點贊動畫

開工大吉，在開工次日，送上每週一個動畫系列的第三篇，新的一年先給本身一個大大的贊。閒話不說，開始咱們的正文。

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

源動畫效果

能夠看到鼠標在點擊紅心的時候，有些粒子效果，同時紅心填充爲紅色，效果的確很贊。

實現分析

咱們應該記得在《每週一個前端動畫之一：UC瀏覽器球隊展現動畫的實現》中提到了計時函數animation-timing-function，它的屬性有個階躍函數steps()，咱們能夠使用這個函數。使用包含一組漸變的效果的精靈圖（以下圖），設置好合適的步數，只要咱們在水平軸跳躍的移動圖片，就能達到咱們的效果。

代碼實現

使用上文提到的一張特殊的精靈圖做爲背景

.HeartAnimation {
    background-image: url(web_heart_animation_edge.png);
    background-position: left;
}
複製代碼

設置動畫的計時函數steps,這裏須要明確一下，steps是一個階躍函數，函數曲線不是連續的，由於圖片一共有29張，存在28個間隔，因此，咱們設置階躍的步數爲28

.like-active {
    animation-timing-function: steps(28);
    animation-name: heart-burst;
    animation-duration: .8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    display: inline-block
}
@keyframes heart-burst {
    0% {
        background-position: left
    }

    100% {
        background-position: right
    }
}
複製代碼

效果展現

關鍵點解讀

本文的關鍵點就在於steps函數的使用，steps函數使用的地方不少，只要是這種特定步驟的動畫，均可以實現。steps還有不少其餘的使用方式，咱們在後續的博文裏也會屢次的看到的。

代碼已上傳到github，歡迎提出Issues。

最後的慣例，貼上個人博客，歡迎關注