原生 JS 实现帧动画库_技术问答

首页免费课原生 JS 实现帧动画库问答

原生 JS 实现帧动画库

                
                ustbhuangyi
            Web前端工程师

                    查看讲师更多课程 
                    ustbhuangyi讲师的其他课程
                
Vue.js 源码深入解析 深入理解Vue实现原理
实战·高级·4974

                                                                                                                                    ￥149.00
                                            
下一代前端开发语言 TypeScript从零重构axios
实战·中级·2618

                                                                                                                                    ￥119.00
                                            
Vue3开发企业级音乐Web App 明星讲师带你学大厂代码
实战·高级·2223

                                                                                                                                    ￥448.00
                                            
                难度中级
            
                时长 2小时52分
            
                学习人数
            
综合评分9.53
                            56人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.5
                                简洁易懂
                            
                                9.4
                                逻辑清晰

全部评论问答未解决精华

当图片用作元素背景，如何控制图片的长宽

最新回答 / 虹虹_0001

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

2 回答 983 浏览 1-1 认识帧动画

2016-09-26

http://localhost:8080/demo/demo.html打开后没动画??

最新回答 / 小信_03370846

animation路径改一下

2 回答 4437 浏览 3-3 课程总结

2016-09-24

仔细看 timeline.animationHandler = requestAnimationFrame(nextTick);这句nextTick作为回调函数传到之前定义的requestAnimationFrame函数中，在requestAnimationFrame函数中，当浏览器不支持requestAnimationFrame时，会返回下面这句return window.setTimeout(callback, callback.interval || DEFAULT_INTERVAL);其中call...

2 回答 820 浏览 2-5 timeline的实现

2016-09-22

老师，能提供下图片素材嚒？

最新回答 / 北鸟南游

https://github.com/ustbhuangyi/animation/tree/gh-pages/images 这里面有啊

1 回答 736 浏览 2-3 图片预加载的应用

2016-09-12

var item =image[keys]; 1 item = image[keys] ={ 2 第2个item是重新定义的一个item对象吗和上边的item有关系吗 src ;item; //这里的item和上边的item代表的是不是同一个值啊 3 }

最新回答 / 不生则死

有关系

1 回答 744 浏览 2-2 图片预加载实现

2016-08-27

动画没有运行

最新回答 / qq_若谷_1

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

4 回答 805 浏览 1-1 认识帧动画

2016-08-18

图片类问题，关于源码

最新回答 / abcd而非abc

谢谢，我没想到会这么快的回答我，十分感谢！

2 回答 798 浏览 2-1 接口定义

2016-08-10

课程中用到的背景图是用什么工具生成的？

+ 我来回答回答最高可+2积分

0 回答 436 浏览

2016-08-08

var position= positions[index].split(' ');这句活报错。

讲师回答 / ustbhuangyi

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

4 回答 2248 浏览 1-1 认识帧动画

2016-07-27

module.export是什么呀，require("/??")是什么高级语言呀

讲师回答 / ustbhuangyi

CommonJS的语法，需要webpack打包才能在浏览器环境运行

2 回答 1431 浏览

2016-07-18

item.img = window[item.id] = new Image() 14:37/26:17[分钟处遇到不懂的了]

讲师回答 / ustbhuangyi

可以参考这个回答：http://www.imooc.com/qadetail/142112

1 回答 1883 浏览 2-2 图片预加载实现

2016-07-17

webstrom的主题

讲师回答 / ustbhuangyi

我已经用webStorm 2016了，用的Darcula主题

1 回答 653 浏览

2016-07-14

老师，这个需求分析和编程接口的设计是一开始都想全了的吗

讲师回答 / ustbhuangyi

其实这个帧动画库我在百度工作的时候，从一个实际项目需求里抽象出来的。因为我们有大量帧动画的需求，但又不想为每个需求去编写那些重复的代码，所以就想抽象一个通用的帧动画库，方便开发。当时设计接口的时候一个很重要的原则，就是怎么让人用起来爽，就定了链式调用这种方式。后来也发现这种设计和promise的一些设计思想不谋而合。一开始设计的时候就考虑到大部分接口了，比如loadImage，changePosition，changeSrc，then，repeat，repeatForever，enterFrame，sta...

3 回答 1018 浏览 1-2 设计通用帧动画库

2016-07-05

可以用setInterval?

讲师回答 / ustbhuangyi

首先，要理解JS的执行是单线程的，在一轮Event Loop的时候，会执行所有同步JS代码。setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。每一轮Event Loop时，都会将“任务队列”中需要执行的任务，一次执行完。setTimeout和setInterval都是...

2 回答 864 浏览 1-1 认识帧动画

2016-07-04

Image对象放在doLoad函数里面去定义，会不会更好点？

最新回答 / 单独世界

问错地方了，是下一节的

1 回答 740 浏览 2-1 接口定义

2016-06-12

首页上一页 1 2 3 4 5 下一页尾页

开始学习

课程须知: 1、对前端基础知识已经掌握（html、js、css） 2、对前端面向对象编程有一定了解

老师告诉你能学到什么？: 1、什么是帧动画及网页中常见的几种帧动画方式 2、原生 JS 实现帧动画的原理 3、如何设计一个通用的帧动画解决方案 4、了解类似 promise的设计思想（异步任务链式调用） 5、面向对象的开发方式和模块化开发思想 6、如何实现图片预加载模块

微信扫码，参与3人拼团

热搜

最近搜索清空

原生 JS 实现帧动画库