动画现在基本是web站点必备项,各大JS框架都封装了相应的代码。QWrap也内置了一个实现,支持常见的动画效果和算子及队列播放,这里有示例。JS动画的实现有多种方式,各自有哪些区别,QWrap使用的哪一种?本文闲聊这个话题。
一、使用浏览器的定时器(setInterval/setTimeout)。这种动画实现方式很早就被大家广泛使用,原理简单,兼容性好。最核心的原理就是利用定时器,在一定时间内(duration),以一定的间隔(frameTime)执行动画函数(callback)。在动画函数里可以改变元素大小、位置(css属性值);可以改变元素滚动条位置(scrollTop/scrollLeft);甚至用来改变文本内容(倒计时)。
动画间隔决定了动画的每秒帧数(FPS),一般的,FPS越高,动画就表现得越流畅,FPS偏低,动画就会不流畅、卡顿。JQuery中,动画间隔默认为13ms,也就是说理想状态下,动画的每秒帧数是70多。实际上,由于JS定时器精度问题,间隔不可能太小;在计算机资源占用比较大时,这个间隔也没办法得到保证;更为严重的是,新一点的浏览器在页面不可见时(例如切换到其他tab,浏览器被最小化),会自动提高定时器执行间隔,firefox5开始,setInterval的间隔在浏览器最小化之后至少被提高到1000ms。
动画时长 = 播放总帧数 * 帧间隔平均值。由于帧间隔不可控,可能被提高到1000ms甚至更高,那么实现动画时面临两个选择:要保证播放总帧数,动画时长就会增加;要保证动画时长,就必须牺牲掉总帧数。实际上我们一般采用第二种方式,也就是丢帧保时的策略来实现动画,来看一个简单的例子:
HTML<script>
var timerId, startTime, frameTime = 13, dur = 3 * 1000;
function animFun(time) {
var per = Math.min(1.0, (new Date - startTime) / dur);
if(per >= 1) {
clearTimeout(timerId);
} else {
document.getElementById("animated").style.left = Math.round(500 * per) + "px";
}
}
function start() {
startTime = new Date;
timerId = setInterval(animFun, frameTime);
}
</script>
<div id="animated" onclick="start()" style="position: absolute; left: 0px; padding: 50px;background: crimson; color: white">Click Me</div>
在动画开始时记录一个初始时间,动画函数里用当前时间减去初始时间,得到的时间差除以总时长,可以得到动画执行进度(per)。再根据per去改变元素的css属性值,就实现了一个最简单的动画。
上面例子中,方块运动是匀速的,平淡无奇。想要运动轨迹更有趣,就需要引入动画算子。动画算子是一个函数,把动画进度per转换为另外一个值,在上面例子基础上改进下:
HTML<script>
var timerId, startTime, frameTime = 13, dur = 3 * 1000;
function bounceOut(p) {
if (p < (1 / 2.75)) {
return (7.5625 * p * p);
} else if (p < (2 / 2.75)) {
return (7.5625 * (p -= (1.5 / 2.75)) * p + 0.75);
} else if (p < (2.5 / 2.75)) {
return (7.5625 * (p -= (2.25 / 2.75)) * p + 0.9375);
}
return (7.5625 * (p -= (2.625 / 2.75)) * p + 0.984375);
}
function animFun(time) {
var per = Math.min(1.0, (new Date - startTime) / dur);
if(per >= 1) {
clearTimeout(timerId);
} else {
document.getElementById("animated").style.left = Math.round(500 * bounceOut(per)) + "px";
}
}
function start() {
startTime = new Date;
timerId = setInterval(animFun, frameTime);
}
</script>
<div id="animated" onclick="start()" style="position: absolute; left: 0px; padding: 50px;background: crimson; color: white">Click Me</div>
这下方块运动就有趣多了,上面例子中的bounceOut就是一个算子。有些动画组件算子可能会接受更多参数(运动距离、时间等),但是QWrap中,算子都只需要传per。这里有QWrap内置算子的演示。
二、W3C有一份WindowAnimationTiming interface规范,也可以用来实现动画。它的核心方法是requestAnimactionFrame和cancelRequestAnimationFrame。各大浏览器新版都有实现,这部分内容我之前介绍过,不了解的同学可以点过去看,看完记得再回来。
可以看到,W3C这份规范提供的动画没有帧间隔时间这个概念,也就是何时触发下一帧完全由浏览器控制。其它方面跟setInterval动画几乎一样,上面的算子也可以直接拿来用。下面说下我遇到的几个坑:
首先是firefox:在11之前的某个版本开始,firefox实现了mozRequestAnimationFrame,却没有提供对应的mozCancelRequestAnimationFrame,那时网上有文章会提到通过“注册、移除moz私有的beforepaint事件”来模拟这个事件。坑爹的是,firefox11开始有了mozCancelRequestAnimationFrame,但老方案直接抛异常。
webkit下也有坑:某个诡异的webKit版本下,webkitRequestAnimationFrame没有给回调函数传time参数,更神奇的是一些webkit居然传递错误格式的time。为此,在webkit下我们通常不用参数里的time,改为自己new Date。
综上,由于各浏览器对标准实现的不一致和bug,最终我们在QWrap中并没有使用基于原生动画函数的版本。不过也可以像下面这样变通使用,来绕过那些坑:
HTML<script>
var timerId, startTime, dur = 3 * 1000,
requestAnimationFrame = window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
if(!requestAnimationFrame) { alert('你的浏览器不支持requestAnimationFrame!'); }
function animFun(time) {
if(!timerId) return false;
var per = Math.min(1.0, (new Date - startTime) / dur);
if(per >= 1) {
timerId = null;
} else {
document.getElementById("animated").style.left = Math.round(500 * per) + "px";
requestAnimationFrame(animFun);
}
}
function start() {
startTime = new Date;
timerId = 1;
requestAnimationFrame(animFun);
}
</script>
<div id="animated" onclick="start()" style="position: absolute; left: 0px; padding: 50px;background: crimson; color: white">Click Me</div>
三、CSS3动画。css3中的Transition可以用来平滑改变css属性值。简而言之,给元素设置下面这样的css样式后,再改变transition-property指定属性的值,浏览器会自动处理剩下的事情:
通常,我们在css里写好transition规则,再改变元素class就可以拥有css3动画了。但是为了使用更方便,我们也可以把这个过程封装成为js组件。监听动画执行结束,也需要依赖js。
具体的代码就不贴了,后面例子里都有,这里说一些需要关注的地方。本来,检测浏览器是否支持css3动画可以通过创建临时元素,判断'transitionProperty' in el.style是否为true就可以了;但是,万恶的浏览器厂商前缀(就是那些-webkit-、 -moz-、-o-、-ms-),使这个过程变得复杂多了。最坑爹的是IE,css里可以用“-ms-transition-property”,js中对应的style,却是“el.style.msTransitionProperty”。QWrap在设置css的函数中,会先调用StringH.camelize函数处理属性名,会把“-ms-xxx-ooo”变成“MsXxxOoo”,IE不认!其他浏览器则无论首字母是否大小都支持。
要监听动画结束,webkit需要给动画元素绑定webkitTransitionEnd事件,firefox是transitionend,opera是oTransitionEnd,IE是MSTransitionEnd。firefox支持标准事件名,其他浏览器都是“小写前缀+TransitionEnd”,唯独IE的ms全都要大写!
好在,随着浏览器的发展,大家逐渐开始支持标准写法,慢慢不再需要写前缀了。我这边测试,最新的IE10 for Win7 Pre Release版也支持了标准写法,所以js需要优先尝试无前缀的用法。详细的情况可以去CanIUse看。
--- 分割线 ---
几种动画实现都大概介绍了下,都可以封装成JS组件,有一致的接口方便调用。那么实际项目中该如何选择呢?
从浏览器支持度来看,除了第一种方案,其余方案都是没办法在低版本IE使用的。如果需要支持更多浏览器,可以采用方案一(QWrap);或者优先使用方案二,方案一作为降级(JQuery)。如果是面向移动平台,可以使用方案三(Zepto)。
移动平台上能用css3动画就不要用requestAnimationFrame,因为iOS6才开始支持它。使用css3的transition+transform,渲染效率比动画callback里改变css属性值高很多。另外,iOS上移动或缩放页面时,操作的是touch开始时的截屏,页面是静止不动的。那么松开手指,只有css3动画能连续播放,其他两种方案因为都是根据时间差计算进度,会明显的跳跃到某帧。
css3动画有一些功能上的缺失,它不支持在播放每一帧时触发callback,也就是没办法监控播放进度,也没办法暂停和恢复动画。但是css3动画组件可以把Transform封装进去,提供一些很赞的新功能:DEMO。更复杂的动画,或者有暂停播放的需求,通过CSS3 Animation可以实现,不过我们暂时很少用到,所以没做封装。
而setInterval和requestAnimationFrame实现的动画,在改变css属性时需要额外做更多事情,例如backgroundColor需要转化为R、G、B三个数值来分别变换;其它有单位的属性值,如height:100px,也需要转化为{value:100, unit:'px'}这样的形式,再对value进行变换。但是,由于每个属性都可以应用不同的算子,可以组合出独特的运动轨迹,DEMO。
前面说到在页面不可见时,浏览器会自动提高setInterval的间隔。那对于requestAnimationFrame和css3动画,浏览器会怎么处理呢?
这个测试页面引入了三个iframe,对应本文三种动画实现,duration都是2s。16s的时间内,动画应该执行8个周期。页面处于不可见时:chrome下,用requestAnimationFrame实现的动画完全被停止播放;其他动画执行周期都有一定程度下降。测试地址在这里,大家可以自己试试~
相关推荐
这本小册子通过制作 一个图像动画特效为主线向大家讲解JavaScript动画制作的基本技巧,分四步讲解本动画的实现:一是用Javascript制作动画-生成图象数组 、二是设置图象的位置、三是现在开始演示动画、四是用...
4. **CSS3动画与过渡**: 虽然主要讨论JavaScript动画,但CSS3也提供了强大的动画和过渡功能,比如`transition`和`animation`属性,可以方便地实现元素的平滑变化。这些可以与JavaScript动画结合,增强用户体验。 5....
HTML5+JavaScript动画基础(中文完整版)
由于提供的文件信息中并没有包含具体的HTML5和JavaScript动画基础的知识点,我只能根据标题和描述中提及的内容,结合HTML5和JavaScript的相关技术,为您详细解释在创建HTML5和JavaScript动画时所需掌握的基础知识点...
1. GreenSock (GSAP):这是一个强大的JavaScript动画库,提供了高级的性能和易用性,支持复杂的动画序列和时间线。 2. Anime.js:这是一个轻量级且功能丰富的动画库,支持CSS属性、SVG、DOM、JavaScript对象和数值...
JavaScript动画引擎是Web开发中的一个重要组成部分,特别是在创建交互式和动态用户体验时。JavaScript作为一个轻量级的解释型编程语言,其灵活性和强大的DOM操作能力使其成为实现网页动态效果的首选工具。本文将深入...
总结一下,创建“太空星球运动”Canvas动画涉及以下JavaScript和Canvas知识点: 1. 使用HTML5的`<canvas>`元素创建画布。 2. 获取Canvas的2D渲染上下文。 3. 定义星球对象,包括位置、大小、颜色和速度属性。 4. ...
- JavaScript动画:利用JavaScript的`requestAnimationFrame`或定时器(如`setInterval`、`setTimeout`)来逐帧改变元素属性,创建自定义动画。 - 事件驱动:结合用户交互,如点击、滚动等,触发动画效果。 2. **...
《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分,分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户...
"anime.js"是一个知名的开源JavaScript动画引擎,它在开发者社区中广受欢迎,因其强大的功能和易于使用的API而备受赞誉。 anime.js提供了丰富的动画控制选项,包括但不限于平移、缩放、旋转、颜色变化等,涵盖了2D...
JavaScript动画引擎是一个用于在网页上创建流畅、动态视觉效果的工具。这个压缩包"一个简单而强大的JavaScript动画引擎.zip"包含了一个名为"Animation.js"的核心脚本文件,可能还包含了其他辅助资源或示例文件,如"Y...
JavaScript动画制作,javascript是一个很流行的WEB开发技术。
下面是一个简单的JavaScript动画实例,展示了一个红色方块沿水平方向移动的动画效果: ```html ; LEFT: 0px; width: 50px; position: absolute; height: 50px"> ``` ```javascript var obj = document....
`Between` 是一个专为JavaScript设计的动画库,它巧妙地利用了ES6的代理(Proxy)特性,为开发者提供了一种与Cocoa Animation API相类似的流畅动画体验。在JavaScript的世界里,创建平滑、高性能的动画效果一直是一...
在给定的标题“编写基于Prototype的Javascript动画类”中,我们可以看到讨论的是如何利用Prototype库来创建自定义的动画类。Prototype是一个广泛使用的JavaScript库,它提供了许多便利的功能,包括DOM操作、事件处理...
"CSS+JavaScript 实现扇形导航动画效果"是一个巧妙地将这两种技术结合的示例,旨在为用户创造一个独特且引人入胜的导航体验。这个项目通过CSS来布局和设计扇形导航的静态部分,然后利用JavaScript实现动画效果,使...
JavaScript动画实例:曲线的绘制.pdf
GSAP (GreenSock Animation Platform) 是一个强大的JavaScript动画库,专为现代网络设计,提供高效、灵活且高性能的动画解决方案。这个库以其出色的性能、易用性和广泛的浏览器兼容性而闻名,深受开发者喜爱。在...
用JavaScript制作动画
在JavaScript编程领域,队列动画是一种常见的技术,用于在网页上创建流畅、有序的动态效果。这个实例展示了如何利用JavaScript的特性来实现这样的效果。队列动画的基本思想是将一系列动画动作按照一定的顺序组织起来...