好像没有提供图片的

https://github.com/ustbhuangyi/animation

用ps可以看到每一帧的坐标

MarkMan你可以试试~

看视频上面好像是bash，他只是建了一个本地服务器，你也可以直接点击你的html文件直接运行

画图工具

谢谢 找到原因了 把background-repeat去掉就好了

css的写法是background-position: x y;  x与y之间是有一个空格的

哦哦哦。

并不用，也可以在本地操作

打开ps，换成px单位，再测量

https://github.com/ustbhuangyi/animation

第二种方式要求背景图片里面的每个图案的宽高是一样的，平常可以用background-size属性（css3）

使用PS 做一个透明背景的图片，然后把每个关键帧，复制到这个图片中就ok了

是'url(' + imgUrl + ')'，这是一个字符串前一个引号里面是'url(',后一个是')',然后用加号把imgUrl连接

啊，不知这时候来答晚不晚，刚试做，也遇到同样问题了 ，后来发现 是在x，y数组之间缺了一个空格，

请贴上完整的demo地址，提问方式可以参考http://www.imooc.com/qadetail/142900

参考这个回答：http://www.imooc.com/qadetail/142900

首先，要理解JS的执行是单线程的，在一轮Event Loop的时候，会执行所有同步JS代码。

setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。

每一轮Event Loop时，都会将“任务队列”中需要执行的任务，一次执行完。setTimeout和setInterval都是把任务添加到“任务队列”的尾部。因此，它们实际上要等到当前脚本的所有同步任务执行完，然后再等到本次Event Loop的“任务队列”的所有任务执行完，才会开始执行。由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证，setTimeout和setInterval指定的任务，一定会按照预定时间执行。

所以，我们如果用setInterval去实现动画，当一次执行的JS时间超过了setInterval设置的延时时间，会导致动画看上去卡顿。jQuery实现动画就是用了定时器，所以性能很一般。所以一般建议是用requestAnimationFrame或者css3动画。

requestAnimationFrame比起setTimeout、setInterval的优势主要有两点：

requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

如图所示：

用了些node.js语法，需要打包后才能运行

webstrom

步骤如下：

明白了这里position[0] + 'px '有空格

同学，看代码不够仔细呀~ 你仔细看看和视频里的代码差别喔~
http://runjs.cn/code/0yn6eweq 这是我帮你调好的效果

http://www.lxway.com/154167.html

这只是一个简单的demo ，确实 ，大量的话 可以用工具自动生成