开工大吉, 在开工第二天, 送上每周一个动画系列的第三篇, 新的一年先给自己一个大大的赞闲话不说, 开始我们的正文
本文分析实现的某些效果, 仅仅作为一个思路分享, 仅仅作为学习素材使用
源动画效果
可以看到鼠标在点击红心的时候, 有些粒子效果, 同时红心填充为红色, 效果的确很赞
image
实现分析
我们应该记得在每周一个前端动画之一: UC 浏览器球队展示动画的实现中提到了计时函数
animation-timing-function
, 它的属性有个阶跃函数 steps(), 我们可以使用这个函数使用包含一组渐变的效果的精灵图 (如下图), 设置好合适的步数, 只要我们在水平轴跳跃的移动图片, 就能达到我们的效果
image
代码实现
使用上文提到的一张特殊的精灵图作为背景
- .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
- }
- }
效果展示
image
关键点解读
本文的关键点就在于 steps 函数的使用, steps 函数使用的地方很多, 只要是这种特定步骤的动画, 都可以实现 steps 还有很多其他的使用方式, 我们在后续的博文里也会多次的看到的
来源: http://www.jianshu.com/p/98931309e518