旋转的月亮动画2-通过复制像素创建动画

通过复制点创建动画

动画的一个基本定义是通过在一定时间内改变或移动图像而产生的幻觉。

在本例中，目标是创建球状的月亮在它竖直轴附近转动的幻觉影像。

但是，为了动画的目的，你可以忽略例子的球状变形的问题

考虑到实际加载并使用的图像是这样的月亮图像

就像你看到的，图像不是一个或几个面，它是一个长方形的月亮表面的图像

因为，图像是从月亮的赤道上方拍摄来的

部分靠近顶端和底端图像是变形了的图像

为了消除变形，使其看上去像个球，我们将用到一个像后面描述的displacementmap过滤器，

尽管如此，因为源图像是个长方形，为了创建创建球型转动的幻觉，代码需要将月球表面照片转换成地平面。下文详谈。

注意 图像实际上包含月亮表面图像的两个copy

这个图像是用来创建月亮外貌的源数据

把图像的复制一个在它的旁边，有利于创建旋转效果。

让我们通过看动画制作的一个个步骤来理解其原理

整个步骤实际上包含了两个相对独立的ActionScript对象（模块）

首先，有个被加载的源图像，在代码中它被存储在BitmapData类型变量textureMap中

就像前面讨论的，textureMap是在图像加载完毕的时候被赋值的，下面是代码：

textureMap的内容就是前面展示过的那图像

另外为了创建真实的旋转效果

例中使用了一个叫sphere的Bitmap类型变量，它是真正把图像显示在屏幕上的量

就像textureMap类似，sphere对象在imageLoadComplete（）函数中初始化图像数据，下面是代码
sphere = new Bitmap();
sphere.bitmapData = new BitmapData(textureMap.width / 2,textureMap.height);
sphere.bitmapData.copyPixels(textureMap,new Rectangle(0, 0, sphere.width, phere.height),new Point(0, 0));

和上面显示的一样，sphere是个实例，它的bitmapData属性中height设置的和textureMap的高度一样，宽度是它的一半。

换句话说，sphere的大小只包含所示图像的一半，（因为textureMap包含了两个moon图片）

接下来是用copyPixels()方法填充的bitmapData，

copyPixels方法的参数表示下面的含义

第一个参数是表明图像是从textureMap复制过来的

第二个参数，是个Rectangle（矩形区域）类型的实例，指定了textureMap中图像的那个部分将被复制下来，这里被复制的部分是从textureMap的左上角开始的（对应Rectangle（）里面的前两个参数0，0）同时被复制部分的宽度和高度是和Rectangle里的宽度高度属性相对应的。

第三个参数：一个点坐标（0，0），它定义了被复制的部分将放在sphere的什么位置上，本例中被放在了sphere.bitmapData的左上角（0，0）

Represented visually,代码从textureMap复制了下图标出的那些像素到sphere中

换句话说，sphere 的BitmapData内容是textureMap被高光标处的部分

记住：不管怎样，那只是sphere的初始状态拷贝到sphere中的第一幅图像

当源图像加载完毕，sphere初始化完毕，imageLoadComplete（）的最后要执行的任务是设置动画（让它动起来）

动画是靠一个被称作rotationTimer的Timer实例驱动的，下面是创建它的代码
var rotationTimer:Timer = new Timer(15);
rotationTimer.addEventListener(TimerEvent.TIMER, rotateMoon);
rotationTimer.start();

代码首先创建了Timer实例，命名为rotationTimer；Timer（）构造函数的参数表明，每过15毫秒timer事件将被触发一次。
Next, the addEventListener() method is called, specifying that when the
timer event (TimerEvent.TIMER) occurs, the method rotateMoon() is called.
接下来，addEventListener（）指出了当timer事件(TimerEvent.TIMER)发生的时候，将调用rotateMoon()方法。

最后，timer通过它的start（）方法被启动

根据rotationTimer的定义，大约每过15毫秒Flash Player会调用一次MoonSphere类里的
rotateMoon方法，MoonSphere类就是月亮动画产生的地方

rotateMoon（）方法的代码如下
private function rotateMoon(event:TimerEvent):void
{
sourceX += 1;
if (sourceX > textureMap.width / 2)
{
sourceX = 0;
}
sphere.bitmapData.copyPixels(textureMap,
new Rectangle(sourceX, 0, sphere.width, sphere.height),
new Point(0, 0));
event.updateAfterEvent();
}
The code does three things:
代码做了三件事
1. The value of the variable sourceX (initially set to 0) increments by 1.
sourceX的值递加1，初始值为0
sourceX += 1;
 
就像你看到的，sourceX是用来决定当前会从textureMap的什么位置开始复制图片剪辑到sphere，因此，这个代码相当于是把矩形区域一个像素一个像素地向右移动。

看图，经过几个轮回后，矩形区域会向右移动，就像这样：

再经过几个轮回，矩形区域会向右“走”得更远一些。

渐渐地，……？（动画就产生了）

当前被选图像持续不断向右移动，显示在屏幕上的图像持续不断地向左移动
这就是为什么要两个一模一样的图像放在一起的缘故

因为矩形区域持续向左移动，大多数时候它不只是包含一个图像，（而是既有这个图像里的内容也有那个图像里的内容）

当图像持续右移会带来另外一个问题

万一矩形到了textureMap的右边界， 再向右它会复制一些超出moon photo的像素到sphere里

接下来的几行代码解决了这个问题
if (sourceX >= textureMap.width / 2)
{
sourceX = 0;
}
代码检查了sourceX是否到达了textureMap的正中（矩形的右边界将到达textureMap右边界）

如果是，它将重新设置sourceX为0 ，把矩形区域移动到textureMap的左边界，重新开始循环

代码用了非常简单的方法初始化了sphere（前面已经左了讨论）

在这里，唯一不同的是在Rectangle（）构造函数里，左边界换成了sourceX

还记得代码是每15毫秒执行一次

当代表当前显示的矩形框移动的时候，对应的像素 会被复制到sphere里面 ，出现在屏幕上的将是月亮的图片持续断地在“流动”

换句话：月亮（图片）出现了不断循环