使用 DHTML 与 XML 制作 Ajax 幻灯片

lastwinner

在浏览器中打开该页面将显示 图 5 所示的结果。
图 5. 修改后的测试页

修改后的 processReqChange 代码现在查看 responseXML 对象而不是 responseText 文本。此外，它还使用 getElementsByTagName 访问所有的 <slide> 标记。然后解析 src、width 和 height 属性，并使用 document 对象的 createElement 方法创建行和单元格来存放数据。该方法使用的 createElement 远比过去的老方法健壮，原来要建立一个包含表格内容的 HTML 字符串，然后用 innerHTML 将数据添加到已有的元素中。

lastwinner

创建幻灯片放映
现在已经有了能够确定幻灯片中图像的 Web 服务，还需要显示这些幻灯片并执行 Ken-Burns-Effect 动画的客户端代码。为此必须将执行三种基本功能的 JavaScript 对象结合起来：

• 封装图像
• 提供基本的动画引擎
• 实现特效（比如移动、缩放和渐变）

lastwinner

封装图像
首先从图像容器开始，我创建一个类 ImageInfo，如 清单 4 所示。
清单 4. ImageInfo.js
[php]
function ImageInfo( src, width, height, htmlObj )
{
  this.src = src;
  this.width = width;
  this.height = height;
  this.current_width = width;
  this.current_height = height;

  this.htmlObj = htmlObj;
  this.htmlObj.src = this.src;
  this.htmlObj.width = this.current_width;
  this.htmlObj.height = this.current_height;
}

ImageInfo.prototype.set_opacity = function( opacity )
{
  this.htmlObj.style.MozOpacity = opacity / 100;
  var f = 'progidXImageTransform.Microsoft.Alpha(opacity='+opacity+')';
  this.htmlObj.style.filter = f;
}

ImageInfo.prototype.set_position = function( x, y )
{
  this.htmlObj.style.left = x+'px';
  this.htmlObj.style.top = y+'px';
}

ImageInfo.prototype.set_size = function( w, h )
{
  this.current_width = w;
  this.current_height = h;

  this.htmlObj.width = this.current_width;
  this.htmlObj.height = this.current_height;
}

ImageInfo.prototype.get_image = function()
{
  return this.htmlObj;
}

ImageInfo.prototype.hide = function()
{
  this.htmlObj.style.visibility = 'hidden';
}

ImageInfo.prototype.show = function()
{
  this.htmlObj.style.visibility = 'visible';
}
.........
[/php]


幻灯片中每幅图片都有一个对应的 ImageInfo 对象。该对象封装了图像信息：src、width 和 height。该对象还包含对在文档中显示图像的 HTML <img> 标记的引用，以及移动图像、设置透明度等的 helper 方法。注意，在 Firefox 和其他基于 Gecko&reg; 的浏览器中，MozOpacity 样式用于设置不透明性。Internet Explorer 中则使用过滤器效果。

lastwinner

创建简单的动画引擎
下面我们来编写一个简单的动画引擎。Animation.js 文件中的代码如 清单 5 所示。
清单 5. Animation.js
[php]
function Animation( am, img, seconds, effects )
{
  this.img = img;
  this.animationManager = am;
  this.seconds = seconds;
  this.effects = effects;
  this.startMS = 0;
}

Animation.prototype.start = function()
{
  this.animationManager.add( this );
  this.startMS = 0;

  this.img.hide();
  for( var e in this.effects )
  {
    this.effects[e].apply( 0 );
  }
  this.img.show();
}

Animation.prototype.animate = function()
{
  var d = new Date();
  if ( this.startMS == 0 )
    this.startMS = d.valueOf();

  var p = (((d.valueOf()-this.startMS)/1000)/this.seconds)*100;
  for( var e in this.effects )
    this.effects[e].apply( p );
}

Animation.prototype.done = function()
{
  var d = new Date();
  return ( ( d.valueOf() - this.startMS ) / 1000 ) > this.seconds;
}

function AnimationManager( speed )
{
   this.animations = [];
   var self = this;
   window.setInterval( function() { self.idle(); }, speed );
}

AnimationManager.prototype.add = function( anim )
{
  this.animations.push( anim );
}

AnimationManager.prototype.idle = function()
{
  if ( this.animations.length > 0 )
  {
    this.animations[0].animate();
    if ( this.animations[0].done() )
      this.animations.shift();
    if ( this.animations.length == 0 )
      this.on_finished();
  }
}

AnimationManager.prototype.on_finished = function()
{
}
...........
[/php]

lastwinner

清单 5 包含两个类：Animation 和 AnimationManager。AnimationManager 类控制定时器并向其 Animation 对象列表中的第一项发送动画消息。当 Animation 对象报告自己已经完成的时候，该类就转向下一项，依此类推。
Animation 在一定的时间（按秒数指定）内对特定图片应用一系列特效。Animation 对象需要计算完成度消息并将其发送给每种特效的 apply 方法。特效然后根据这个百分比计算应该如何处理图像。比如，移动特效知道起点和终点，可以根据这个百分比计算应该将图像放到何处。如果是 50%，图像应该移到起点和终点之间。
作为我工作的一部分，同时也为了撰写本文，我考察了大量的 JavaScript 动画代码。JavaScript 动画经常因为不稳定而受到指责，因为所有 JavaScript 动画都使用 window.setInterval 方法来完成。这是一个定时器方法，同时指定了回调时间间隔和回调函数。Web 上的大部分代码都要求每次调用该函数时动画移动一步。但这并不能真正工作，因为告诉浏览器的间隔仅仅是一个建议。如果规定 20 毫秒，但实际上可能第一次在 25 毫秒时调用，下一次却要等到一秒钟以后。浏览器是单线程的，因此不能依赖于定时器。
解决方案是使用 Date 对象的 valueOf 方法确定动画开始了多长时间。这个时间差是用毫秒计的，用于确定当 setInterval 定时器离开时动画应该执行百分之多少。该方法可以提供规定的任意长时间的平滑动画。

lastwinner

执行特效
三个核心类的最后一个是 Ken Burns Effects。这些特效通过 Animation 对象应用于图像，如 清单 6 所示。
清单 6. KenBurnsAnimations.js
[php]
function KenBurnsFader( img, windowSize )
{
  this.img = img;
  this.windowSize = windowSize;
}

KenBurnsFader.prototype.apply = function( percent )
{
  var opacity = 100;

  if ( percent <= this.windowSize )
    opacity = ( percent / this.windowSize ) * 100;
  else if ( percent >= ( 100 - this.windowSize ) )
    opacity = ( ( 100 - percent ) / this.windowSize ) * 100;

  this.img.set_opacity( opacity );
}

function KenBurnsZoomer( img, start, end, cw, ch )
{
  this.start = start;
  this.end = end;
  this.img = img;

  var wr = this.img.width / cw;
  var nw = this.img.width * wr;
  var nh = this.img.height * wr;

  this.sw = ( nw * ( this.start / 100 ) );
  this.ew = ( nw * ( this.end / 100 ) );
  this.sh = ( nh * ( this.start / 100 ) );
  this.eh = ( nh * ( this.end / 100 ) );
  this.dw = ( this.ew - this.sw ) / 100;
  this.dh = ( this.eh - this.sh ) / 100;
}

KenBurnsZoomer.prototype.apply = function( percent )
{
  this.img.set_size(
    this.sw + ( this.dw * percent ),
    this.sh + ( this.dh * percent ) );
}

function KenBurnsMover( img, sx, sy, ex, ey, cw, ch )
{
  this.img = img;
  this.sx = sx / 100;
  this.ex = ex / 100;
  this.sy = sy / 100;
  this.ey = ey / 100;
  this.cw = cw;
  this.ch = ch;
  this.wr = this.img.width / this.cw;
}

KenBurnsMover.prototype.apply = function( percent )
{
  var nw = this.img.current_width * this.wr;
  var nh = this.img.current_height * this.wr;

  var cntw = ( ( this.cw / 2 ) - ( nw / 2 ) );
  var cnth = ( ( this.ch / 2 ) - ( nh / 2 ) );

  var sx = ( nw * this.sx );
  var ex = ( nw * this.ex );
  var sy = ( nh * this.sy );
  var ey = ( nh * this.ey );
  var dx = ( ex - sx ) / 100;
  var dy = ( ey - sy ) / 100;
  var x = cntw + sx + ( dx * percent );
  var y = cntw + sy + ( dy * percent );

  this.img.set_position( x, y );
}
..............
[/php]


这三个类分别处理应用于图像的不同特效。KenBurnsFader 类使用不透明度处理图像的淡入淡出。KenBurnsZoomer 类处理图像的缩放，从最初的大小到最终的大小。KenBurnsMover 类处理图像的移动，从起点到终点（用图像的百分比指定）。

经过一些试验后，我发现最吸引人的移动特效是相对于窗口中心从一个角移动到另一个角。KenBurnsMover 类的 apply 方法包含一些复杂的数学运算，不仅相对于包含图像的 <div> 标记的中心来移动，还要计算图像和 <div> 标记的相对大小，这样在小窗口中移动的距离就小，在大窗口中移动的距离就大。放大倍数根据窗口的高度确定。

lastwinner

实现非 Ajax DHTML
有了这些基础类之后，就可以实现幻灯片的非 Ajax DHTML 版本来进行测试了，如 清单 7 所示。
清单 7. 非 Ajax 幻灯片放映
[php]
<html>
<head>
<style type="text/css">
body { background: black; margin: 0px; padding: 0px; }
</style>
<script src="KenBurnsAnimations.js">
</script>
<script src="Animation.js">
</script>
<script src="ImageInfo.js">
</script>
<script>
var g_animationManager = new AnimationManager( 50 );
var g_current_slide = 0;
var g_slides = [];
var g_directions = [
{ sx: [ -30, 0 ], ex: [ 5, 40 ], sy: [ -30, 0 ], ey: [ 5, 40 ] }, // nw -> se
{ sx: [ 5, 40 ], ex: [ -30, 0 ], sy: [ 5, 40 ], ey: [ -30, 0 ] }, // ne -> sw
{ sx: [ 5, 40 ], ex: [ -30, 0 ], sy: [ 5, 40 ], ey: [ -30, 0 ] }, // se -> nw
{ sx: [ -30, 0 ], ex: [ 5, 40 ], sy: [ 5, 40 ], ey: [ -30, 0 ] } // sw -> ne
];

g_animationManager.on_finished = function()
{
  g_current_slide++;
  if ( g_current_slide >= g_slides.length )
    g_current_slide = 0;
  g_slides[ g_current_slide ].start();
}

function rnd( start, end )
{
  return ( Math.random() * ( end - start ) ) + start;
}

function load_slides( images )
{
  var ic = document.getElementById( 'imgContainer' );

  for( var i in images )
  {
    var img = images;

    var imgObj = document.createElement( 'img' );
    imgObj.style.position = 'absolute';
    imgObj.style.left = '0px';
    imgObj.style.top = '0px';
    imgObj.style.visibility = 'hidden';
    ic.appendChild( imgObj );

    var ii = new ImageInfo( img.src, img.width, img.height, imgObj );

        var szoom = rnd( 50, 100 );
        var ezoom = rnd( 70, 120 );

        var d = parseInt( ( Math.random() * g_directions.length ).toString() );
        var di = g_directions[ d ];
        var sx = rnd( di.sx[0], di.sx[1] );
        var sy = rnd( di.sy[0], di.sy[1] );
        var ex = rnd( di.ex[0], di.ex[1] );
        var ey = rnd( di.ey[0], di.ey[1] );

    g_slides.push(
      new Animation( g_animationManager, ii, 10,
        [ new KenBurnsZoomer( ii, szoom, ezoom, ic.clientWidth, ic.clientHeight ),
          new KenBurnsMover( ii, sx, sy, ex, ey, ic.clientWidth, ic.clientHeight ),
          new KenBurnsFader( ii, 30 ) ] )
    );
  }
}

function start_slides()
{
  g_slides[ g_current_slide ].start();
}
</script>
</head>
<body>

<div style="position:relative;width:100%;height:100%;overflow:hidden;"
  id="imgContainer">
</div>

<script>
var images = [
{ src: 'images/megan1_875_700.jpg', width: 875, height: 700 },
{ src: 'images/oso1_875_700.jpg', width: 875, height: 700 },
{ src: 'images/oso2_873_700.jpg', width: 873, height: 700 }
];
load_slides( images );
start_slides();
</script>

</body>
</html>
................................
[/php]

lastwinner

不用电影是很难说明上述代码在浏览器中的运行结果的。因此我抓了一个快照，如 图 6 所示。
图 6. 幻灯片放映的快照

lastwinner

该页面首先通过 <script> 标记的 src 属性引入基类。安装这些类之后，增加两个函数将整个机制组织到一起：load_slides 和 start_slides。load_slides 函数接收一个数组，包括图像的 src、width 和 height，然后创建 <image> 标记和动画。start_slides 函数从第一项开始启动幻灯片放映。

附加在动画管理器上的另一个方法 on_finished 在动画完成时调用。我使用该通知移动到下一张幻灯片，如果已经完成所有幻灯片的动画，则回到列表中的第一张。

再回到 load_slides，要注意它引用了一个名为 g_directions 的数组。该数组包含一些随机范围，幻灯片加载程序用它来规定图片移动的起点和终点。最理想的效果是从一个角到另一个角。从注释中可以看到，这些值规定幻灯片的移动范围为东北、东南、西北和西南的任意组合。最后的 <script> 标记定义了一个图像数组，然后使用 load_slides 和 start_slides 函数启动幻灯片放映。

lastwinner

创建 Ajax 幻灯片放映
最后一步是创建 Ajax 版本的幻灯片放映。这意味着要使用从 slides.php 服务获得的内容代替硬编码的图像列表。
Ajax 版本的幻灯片放映代码如 清单 8 所示。
清单 8. Ajax 幻灯片代码
[php]
<html>
<head>
<style type="text/css">
body { background: black; margin: 0px; padding: 0px; }
</style>
<script src="KenBurnsAnimations.js">
</script>
<script src="Animation.js">
</script>
<script src="ImageInfo.js">
</script>
<script src="SlideShow.js">
</script>
</head>
<body>

<div style="position:relative;width:100%;height:100%;overflow:hidden;"
  id="imgContainer">
</div>

<script>
function processReqChange()
{
  if (req.readyState == 4 && req.status == 200
      && req.responseXML != null)
  {
    var items = [];
    var nl = req.responseXML.getElementsByTagName( 'slide' );
    for( var i = 0; i < nl.length; i++ )
    {
      var nli = nl.item( i );
      var src = nli.getAttribute( 'src' ).toString();
      var width = parseInt( nli.getAttribute( 'width' ).toString() );
      var height = parseInt( nli.getAttribute( 'height' ).toString() );
      items.push( { src: src, width: width, height: height } );
    }
    load_slides( items );
    start_slides();
  }
}

function loadXMLDoc( url )
{
  req = false;
  if(window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch(e) {
      req = false;
    }
  }
  else if(window.ActiveXObject)
  {
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP";
    } catch(e) {
    try {
      req = new ActiveXObject("Microsoft.XMLHTTP";
    } catch(e) {
      req = false;
    }
  }
  }
  if(req) {
    req.onreadystatechange = processReqChange;
    req.open("GET", url, true);
    req.send("";
  }
}

loadXMLDoc( "http://localhost/kenburns/slides.php" );
</script>

</body>
</html>

.............
[/php]

我把 start_slides 和 load_slides 函数移到了外部 JavaScript 文件 SlidesShow.js 中，以免该文件过大。代码的其他部分和 清单 2 中的 Ajax 测试页类似。只不过这些代码没有插入警告窗口，也没有把数据插入一个表格，而是创建了一个幻灯片信息数组，然后调用 load_slides 和 start_slides。

如此而已！这样就可以使用 Ken Burns Effect 动态地移动、缩放和渐变图像的 Ajax 幻灯片