1.4 展翅飞翔的雄鹰

前面3节分别介绍了3个不同的软体的例子，虽然采用的数学模型各有不同，但都是通过编程直接实现特定的数学模型以实现软体动画的。这在一般的情况下足够用了，但如果想呈现非常复杂的软体动画就很困难了。

有些复杂软体的动画虽然也可以采用数学模型编程实现，但对应的数学模型非常复杂，编程成本很高。本节将给出一种非常简便的实现软体动画的策略——关键帧动画，通过其可以方便地实现游戏中雄鹰飞过蓝天、英雄举刀杀敌的动画。

1.4.1 基本原理

关键帧动画的基本思想非常简单，就是给顶点着色器提供动画中每个关键帧对应的各个顶点的位置数据以及融合比例。顶点着色器根据两套位置数据及当前融合的比例融合出一套结果顶点位置数据。只要在绘制每一帧时提供不同的混合比例即可产生想要的动画。

如本节将要给出的展翅飞翔的雄鹰动画中就用到了3个关键帧，包含4个动画阶段。

● 第一阶段是对1、2号关键帧中的顶点数据进行融合，即从1号关键帧到2号关键帧。

● 第二阶段是对2、3号关键帧中的顶点数据进行融合，即从2号关键帧到3号关键帧。

● 第三阶段是对3、2号关键帧中的顶点数据进行融合，即从3号关键帧到2号关键帧。

● 第四阶段是对2、1号关键帧中的顶点数据进行融合，即从2号关键帧到1号关键帧。

上述4个阶段不断重复就可以呈现出雄鹰展翅飞翔的动画，每个关键帧的具体顶点位置情况如图1-12所示。

到这里读者可能会产生一个疑问：为什么一定要3个关键帧呢？仅保留1、3号关键帧不也能融合出动画吗？确实如此，只保留1、3两个关键帧是可以的，但动画的真实感就会大打折扣。因为仅通过1、3关键帧融合出来的翅膀展平的情况翅膀就会缩短，如图1-13所示。

从图1-13中可以看出使用关键帧动画的一个要领，那就是不重要的中间帧可以通过按比例融合两个关键帧得到，真实感基本不受影响。但关键帧不应该省略而通过其他关键帧融合得到，否则动画的真实感就会变差。

1.4.2 开发步骤

上一小节中介绍了关键帧动画的基本原理以及注意事项，本小节将给出一个关键帧动画的案例Sample1_4，其运行效果如图1-14所示。

了解了案例的运行效果后，接下来将对本案例的具体开发过程进行简要介绍。由于本案例中的大部分类和前面章节很多案例中的非常类似，因此在这里只给出本案例中比较有代表性的部分，具体内容如下所列。

（1）本案例中用到的雄鹰的3个关键帧是采用3ds Max设计并导出成obj文件的，因此首先需要将3个关键帧的顶点数据加载进应用程序并存放到缓冲中，相关代码如下。

代码位置：见随书光盘中源代码/第1章/Sample1_4/com/bn/Sample1_4目录下的GledeForDraw.java。

      1    public void initVertexData（MySurfaceView mv）{       //初始化顶点数据的方法
      2          //加载雄鹰模型
      3          glede_one=LoadUtil.loadFromFileVertexOnly（"laoying01.obj",mv）;
      4          glede_two=LoadUtil.loadFromFileVertexOnly（"laoying02.obj",mv）[0];
      5          glede_three=LoadUtil.loadFromFileVertexOnly（"laoying03.obj",mv）[0];
      6          //创建第一个顶点坐标数据缓冲
      7         vCount=glede_one.length/3;

      8         ByteBuffer vbb = ByteBuffer.allocateDirect（glede_one[0].length＊4）;
      9         vbb.order（ByteOrder.nativeOrder（））;          //设置字节顺序
      10        mVertexBuffer1 = vbb.asFloatBuffer（）;        //转换为Float型缓冲
      11        mVertexBuffer1.put（glede_one[0]）;            //向缓冲区中放入顶点坐标数据
      12        mVertexBuffer1.position（0）;                  //设置缓冲区起始位置
      13        //创建第二个顶点坐标数据缓冲
      14        vCount=glede_two.length/3;
      15        vbb = ByteBuffer.allocateDirect（glede_two.length＊4）;
      16        vbb.order（ByteOrder.nativeOrder（））;          //设置字节顺序
      17        mVertexBuffer2 = vbb.asFloatBuffer（）;        //转换为Float型缓冲
      18        mVertexBuffer2.put（glede_two）;               //向缓冲区中放入顶点坐标数据
      19        mVertexBuffer2.position（0）;                  //设置缓冲区起始位置
      20        //创建第三个顶点坐标数据缓冲
      21        vCount=glede_three.length/3;
      22        vbb = ByteBuffer.allocateDirect（glede_three.length＊4）;
      23        vbb.order（ByteOrder.nativeOrder（））;          //设置字节顺序
      24        mVertexBuffer3 = vbb.asFloatBuffer（）;        //转换为Float型缓冲
      25        mVertexBuffer3.put（glede_three）;             //向缓冲区中放入顶点坐标数据
      26        mVertexBuffer3.position（0）;                  //设置缓冲区起始位置
      27        //创建纹理坐标数据缓冲
      28        ByteBuffer tbb = ByteBuffer.allocateDirect（glede_one[1].length＊4）;
      29        tbb.order（ByteOrder.nativeOrder（））;          //设置字节顺序
      30        mTexCoorBuffer = tbb.asFloatBuffer（）;        //转换为Float型缓冲
      31        mTexCoorBuffer.put（glede_one[1]）;            //向缓冲区中放入顶点纹理坐标数据
      32        mTexCoorBuffer.position（0）;                  //设置缓冲区起始位置
      33   }

（2）为了在顶点着色器中能够根据比例融合关键帧中的顶点数据，因此需要将融合的比例传入渲染管线。由于有3个关键帧，因此融合比例的取值在0～2连续变化。由于将融合比例送入渲染管线的代码非常简单，这里就不再赘述，需要的读者请自行参考光盘中的源代码。

（3）接着需要介绍的是执行顶点融合以产生关键帧动画的顶点着色器，其代码如下。

代码位置：见随书光盘中源代码/第1章/Sample1_4/ assets目录下的vertex.sh。

      1    uniform mat4 uMVPMatrix;                          //总变换矩阵
      2    attribute vec3 aPosition;                         //顶点位置（来自1号关键帧）
      3    attribute vec3 bPosition;                         //顶点位置（来自2号关键帧）
      4    attribute vec3 cPosition;                         //顶点位置（来自3号关键帧）
      5    attribute vec2 aTexCoor;                          //顶点纹理坐标
      6    uniform float uBfb;                               //融合比例
      7    varying vec2 vTextureCoord;                       //用于传递给片元着色器的纹理坐标
      8    void main（）{
      9    vec3 tv;                                          //融合后的结果顶点
      10      if（uBfb<=1.0）{   //若融合比例小于等于1，则需要执行的是1、2号关键帧的融合
      11         tv=mix（aPosition,bPosition,uBfb）
      12      }else{             //若融合比例大于1，则需要执行的是2、3号关键帧的融合
      13          tv=mix（bPosition,cPosition,uBfb-1.0）;
      14      }
      15      gl_Position = uMVPMatrix ＊ vec4（tv,1）; //根据总变换矩阵计算此次绘制此顶点的位置
      16      vTextureCoord = aTexCoor;               //将接收的纹理坐标传递给片元着色器
      17   }