Twitter heart Button 实现
Posted wlbreath
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Twitter heart Button 实现相关的知识，希望对你有一定的参考价值。
本人第一次写博客，写的不好，请大家见谅。
实现的具体的效果如下：
实现原理
实现原理利用帧动画播放CSS Sprite，下面是需要的CSS Sprite
上面的CSS Sprite是2900＊100，图中的每一个小图是100＊100的（一帧动画所要显示的内容），那么我们只要连续的播放上面的每一帧就能实现需要的效果（帧动画原理）。
代码实现
实现的代码可以在Twitter Heart Button 下载
html代码结构
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<div class='heart'></div>
<script type="text/javascript" src='./heart.js'></script>
</body>
</html>上面的class为heart的div是我们要显示动画的容器，它的大小是100＊100的，然后它的背景图片是上面的Sprite。
Sass代码
*
margin: 0;
padding: 0;
box-sizing: border-box;
html,
body
width: 100%;
height: 100%;
$length: 2900px;
$stepCount: 29;
$stepLen: $length / $stepCount;
@keyframes brust-heart
0%
background-position: 0 0;
100%
background-position: ($stepLen - $length) 0;
.heart
width: 100px;
height: 100px;
cursor: pointer;
margin: 100px auto;
background-image: url(./heart.png);
background-position: 0 0;
.brust-heart
animation: brust-heart .8s steps($stepCount - 1, end);
这里我们定义了一个叫做brust-heart的动画，这个动画很简单就是将Sprite从第一帧显示到最后一帧而已，因为最后一帧动画应该在2800的位置，所要在keyframe100％的时候，background-position的值应为-2800px 0（background-position: -2800px 0）;
可能有些同学没有见过animation中的step函数，那个是个什么玩意呀。之前我也没有见过，所以去google了一下，其实也蛮简单的就是一个animation-timing-function而已，只不过step是用来将动画变成帧动画而已。
step函数有两个参数，第一个参数表示在动画分成多少个部分，我们这里是28，也就是说本来是0 -> -2800px的动画，现在变成了0 –> 100px –> 200px –> 300px…–> 2700px -> 2800px的动画了；那么第二个参数是什么意思呢？第二个参数只能是end 或start， 默认为end， end的意思是以每一个间断的开始作为一帧动画的开始，这个也就意味着，如果我们用end，那么每一帧动画分别显示Sprite的位置为0px – 100px, 100px – 200px, … 2700px – 2800px; 如果值为start的话，那么每一间断的结束为一个帧动画的开始位置，每一帧动画分别显示Sprite的位置为100px – 200px, 200px – 300px, … 2800px – 2900px（感觉解释的不是很清楚，哎，表达能力有限）。
javascript
接下来我们要做的就是给我们的heart按钮添加一个点击事件，然后显示我们的动画效果了，很简单，在点击的时候给按钮添加上面Sass中的那个brust-heart类，动画结束的时候去除brust－heart类，具体代码如下：
(function(window, document, undefined)
var heart = document.querySelector('.heart');
heart.addEventListener('click', brustHeart, false);
heart.addEventListener('webkitAnimationEnd', function()
heart.classList.remove('brust-heart');
heart.addEventListener('click', brustHeart, false);
, false);
function brustHeart()
heart.classList.add('brust-heart');
heart.removeEventListener('click', brustHeart, false);
)(window, document);实现的代码可以在Twitter Heart Button 下载
以上是关于Twitter heart Button 实现的主要内容，如果未能解决你的问题，请参考以下文章
像 Twitter 的 Compose Button 这样的全局/持久 UIBarButtonItem？
Asp.net Button 组件在 Twitter-Bootstrap 主题下不起作用