js 实现帧动画
实现帧动画，首先需要这种图片：
（图片来着阿里云）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 #curtitle{ 10 width:64px; 11 height:64px; 12 margin:10px auto; 13 background-image:url('https://img.alicdn.com/tfs/TB1qolSVhz1gK0jSZSgXXavwpXa-128-2688.png'); 14 background-repeat:no-repeat; 15 background-position:center 0; 16 background-size:cover; 17 } 18 </style> 19 <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js" type="text/javascript"></script> 20 </head> 21 <body> 22 <div> 23 <div id="curtitle"> 24 </div> 25 </div> 26 </body> 27 <script> 28 $(function(){ 29 function CustomAnimation(t) { 30 function i() { 31 r.css({ 'background-position-y': '-' + m * s + 'px' }); 32 } 33 function e() { 34 s++, s < u ? (i(), a = requestAnimationFrame(e)) : cancelAnimationFrame(a); 35 } 36 function o() { 37 s--, s >= 0 ? (i(), a = requestAnimationFrame(o)) : cancelAnimationFrame(a); 38 } 39 var a, 40 r = $(t), 41 s = 0, 42 u = 21,//总帧数 43 m = 64;//每帧移动的高度 44 $(t).hover(function () { 45 cancelAnimationFrame(a), a = requestAnimationFrame(e); 46 }, function () { 47 cancelAnimationFrame(a), a = requestAnimationFrame(o); 48 }); 49 }; 50 CustomAnimation($('#curtitle')); 51 }); 52 </script> 53 </html>
代码很简单，就是用的js原生的 requestAnimationFrame 和 cancelAnimationFrame 两个方法实现；
效果可以看阿里云这个位置：
