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

秋染蒹葭發表於2018-02-24
前端動畫

開工大吉，在開工第二天，送上每週一個動畫系列的第三篇，新的一年先給自己一個大大的贊。閒話不說，開始我們的正文。

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

源動畫效果

可以看到滑鼠在點選紅心的時候，有些粒子效果，同時紅心填充為紅色，效果的確很贊。

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

實現分析

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

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

程式碼實現

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

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

效果展示

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

關鍵點解讀

本文的關鍵點就在於steps函式的使用，steps函式使用的地方很多，只要是這種特定步驟的動畫，都可以實現。steps還有很多其他的使用方式，我們在後續的博文裡也會多次的看到的。

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

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

相關文章