前言

现如今，许多页面上均有一些动画效果。适当的动画效果可以在一定程度上提高页面的美观度，具有提示效果的动画可以增强页面的易用性。

实现页面动画的途径有两种。一种是通过操作JavaScript间接操作CSS样式，每隔一段时间更新一次；一种是直接通过CSS定义动画。第二种方法在CSS3成熟之后被广泛采用。在本文中，我们讨论第一种方法的原理和实现。

JavaScript动画实现原理

首先我们需要知道两个重要的概念，动画时间进程和动画效果进程。

动画时间进程指从时间上看动画的完成度，是一个[0, 1]之间的数字。假设动画于时间戳t1开始，要在t2结束，当前时间戳为t，那么该动画目前的时间进程为(t-t1)/(t2-t1)。如果你不能理解，我建议你用纸笔画出来。理解这一概念对理解本文至关重要。

动画效果进程指被动画的属性值当前的增量。假设我们要将#el元素的CSS left 属性从100px变到200px，当前已经变到了130px，那么该动画目前的效果进程为130px - 100px = 30px。

假设动画时间进程和动画效果进程都是线性的。那么如果知道了动画时间进程，一定可以得到动画效果进程。

根据这个解释，我们很快可以编写出一个线性的动画。

(function() {var begin, // 开始动画的时间el, start, end, duration; var INTERVAL = 13;function now() {return (new Date).getTime();}/*** 执行一步动画（更新属性）*/function _animLeft() {var pos = (now() - begin) / duration;if (pos >= 1.0) {return false;}return !!(el.style.left = start + (end - start) * pos);}/*** 对一个DOM执行动画，left从_start到_end，执行时间为* _duration毫秒。* * @param  {object} _el       要执行动画的DOM节点* @param  {integer} _start   left的起始值* @param  {integer} _end     left的最终值* @param  {integer} _duration  动画执行时间*/function animLeft(_el, _start, _end, _duration) {stopped = false;begin = now();el = _el;start = _start;end = _end;duration = _duration || 1000;var step = function() {if (_animLeft()) {setTimeout(step, INTERVAL);}};setTimeout(step, 0);}window.animLeft = animLeft;})();animLeft(document.getElementById('el'),100,200)
JSBin

easing

很多时候，我们需要的动画并非线性的。所谓非线性，从直观上看，就是动画速度随着时间会产生变化。那么如何实现变速的动画呢？

由前所述，我们知道通过控制动画的时间进程就相当于控制动画的效果进程。随着真实世界的时间进程推移，动画的时间进程跟着推移，从而控制动画的效果进程推移。那么，我们可以通过修改真实世界的时间进程和动画的时间进程间的映射关系，从而控制动画进程。如果你感到困惑，没关系，请看下图：

这是线性动画中，真实世界的时间进程和动画进程的映射关系。接下来，我们将其进行变换

这条曲线实际上是函数y = x * x的图像。可以看到，两个曲线的定义域和值域并没有变化。曲线的斜率就是动画的速率。接下来我们将两张图重叠在一起做一个对比。

在真实世界的时间进行到x0的时候，动画进程原本应该进行到y0，在进行变换之后，只进行到y1。到最后，百川归海，两条线交汇于点(1, 1)。这里，y = x * x是变换函数（easing function）。

我们修改一下上面的例子，让动画变成非线性的。

function ease(time) {return time * time;}/*** 执行一步动画（更新属性）*/function _animLeft() {var pos = (now() - begin) / duration;if (pos >= 1.0) {return false;}pos = ease(pos);return !!(el.style.left = (start + (end - start) * pos) + "px");}

JSBin

我们可以在jQuery的代码中看到这样的函数。

jQuery.easing = {linear: function( p ) {return p;},swing: function( p ) {return 0.5 - Math.cos( p * Math.PI ) / 2;}};

因此，你可以往jQuery.easing里面添加easing function，使得jQuery支持新的动画速率控制方法。注意，easing function的定义域和值域必须都为[0, 1]。

jQuery.easing.myEasing = function( p ) { return … }
总结

本文介绍了JavaScript动画的最基本的原理。

JavaScript动画实质上也是通过操作CSS去执行动画。动画的时间进程可以决定动画的效果进程。通过操作真实世界的时间进程和动画的时间进程之间的关系，我们可以将线性动画变换成非线性的动画。

本文转载自：http://www.php100.com/html/it/biancheng/2015/0324/8838.html

JavaScript动画实现基本原理相关推荐

JavaScript动画基本原理
JavaScript动画基本原理在现在做页面很多时候都会用上动画效果.比如下拉菜单,侧边搜索栏,层的弹出与关闭等等.通常我们实现这些动画效果可以采用 JavaScript与CSS3两种方式来实现.本 ...
用 65 行代码实现 JavaScript 动画序列播放
最近在给学生上课,上周六的第一堂课是关于 JavaScript 动画的内容,其中包括一些简单的动画,比如匀速或者匀加/减速的运动,也包括复杂一些的组合动画.而动画的基本原理,在我之前的文章[1]已经有 ...
Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
javascript动画系列第一篇——模拟拖拽
前面的话从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛.javascript动画广泛使用的还是模拟 ...
使用HTML5画布实现的超棒javascript动画仪表板：gauge.js
日期:2012-8-8 来源:GBin1.com 在线演示今天我们分享来自guage.js的超棒动画仪表板实现,这个类库使用html5画布来生成动态的自定义仪表板.不依赖于任何类库也不实用任何的C ...
JavaScript动画知多少？
今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...
10个顶级的CSS和Javascript动画框架推荐
在网站中嵌入动画已成为近年来的一个设计趋势,许多公司都已开始转向并拥抱HTML5.CSS3和JavaScript这个技术"三人组".尽管这些技术还不能制作一些非常复杂的动画(像fl ...
大话 JavaScript 动画
背景 138.2亿年前,世界上没有时间和空间,或许世界都不存在,在一个似有似无的点上,汇集了所有的物质,它孕育着无限的能量与可能性. 宇宙大爆炸巨大的内力已无法被抑制,瞬间爆发,它爆炸了!世界上有了 ...
《HTML5+JavaScript动画基础》——2.4　JavaScript对象
本节书摘来自异步社区<HTML5+JavaScript动画基础>一书中的第2章,第2.4节,作者:[美]Billy Lamberta , Keith Peters著,更多章节内容可以访问云 ...

JavaScript动画实现基本原理

前言

JavaScript动画实现原理

JavaScript动画实现基本原理相关推荐

最新文章

热门文章