开工大吉,在开工第二天,送上每周一个动画系列的第三篇,新的一年先给自己一个大大的赞。闲话不说,开始我们的正文。
本文分析实现的某些效果,仅仅作为一个思路分享,仅仅作为学习素材使用。
源动画效果
可以看到鼠标在点击红心的时候,有些粒子效果,同时红心填充为红色,效果的确很赞。
实现分析
我们应该记得在《每周一个前端动画之一:UC浏览器球队展示动画的实现》中提到了计时函数animation-timing-function
,它的属性有个阶跃函数steps(),我们可以使用这个函数。使用包含一组渐变的效果的精灵图(如下图),设置好合适的步数,只要我们在水平轴跳跃的移动图片,就能达到我们的效果。
代码实现
使用上文提到的一张特殊的精灵图作为背景
.HeartAnimation {
background-image: url(web_heart_animation_edge.png);
background-position: left;
}
设置动画的计时函数steps,这里需要明确一下,steps是一个阶跃函数,函数曲线不是连续的&#