每周一个前端动画之三：twitter点赞动画

时间 2019-11-07

标签每周一个前端动画之三繁體版

原文原文链接

开工大吉，在开工次日，送上每周一个动画系列的第三篇，新的一年先给本身一个大大的赞。闲话不说，开始咱们的正文。css

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

源动画效果

能够看到鼠标在点击红心的时候，有些粒子效果，同时红心填充为红色，效果的确很赞。git

实现分析

咱们应该记得在《每周一个前端动画之一：UC浏览器球队展现动画的实现》中提到了计时函数animation-timing-function，它的属性有个阶跃函数steps()，咱们能够使用这个函数。使用包含一组渐变的效果的精灵图（以下图），设置好合适的步数，只要咱们在水平轴跳跃的移动图片，就能达到咱们的效果。github

代码实现

使用上文提到的一张特殊的精灵图做为背景web

.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还有不少其余的使用方式，咱们在后续的博文里也会屡次的看到的。bash

代码已上传到github，欢迎提出Issues。函数

最后的惯例，贴上个人博客，欢迎关注post