动画中的关键帧动画的原理

本文转载自博主”早上吃什么“《动画中的关键帧动画的原理》一文。

想一想如果制作动画，如果没有关键帧这种技术会是多么恐怖，如果动画帧率为25，即每秒要播放25张画面，假设现在要制作1秒的动画，那么就需要手动制作25张画面，关键帧的出现使得我们只需要画2张画面，中间的23张画面自动计算完成，极大的提升开发效率。

在享受科技的同时不免会思考它的实现原理。

在动画中，动 无非有三种 平移 缩放 旋转。

平移 缩放 旋转 在数学中 我们称它为什么？ 变化

在数学中用什么表示？ 矩阵啊。

以下是我自己的理解，不一定对

假设有一张50*50像素的图片，把这张图片的中心点放在直角坐标系的原点那么每个像素点都有了对应的坐标，有了坐标就可以把一张图片表达成向量的形式了，因为坐标和向量是一一对应的，我们把这些向量放在一个矩阵中，于是一张图片或者一个图形就用一个矩阵表达出来了。想想一下，你现在在ps中把这张图片向右移动了10个单位，那么就需要对这个矩阵左乘一个矩阵，乘了之后的结果就是图片最后的状态。这个过程已经隐含了动画关键帧了。

再回想一下，关键帧动画需要一个首帧和末帧，中间是自动计算的，这个怎么计算的，其实想来也比较简单，制作动画我们会先定下来共需要多少帧，还是刚才那个向右移动的那个动画，假设需要20帧完成这个动画。

那么平均每一个帧需要向右移动0.5个单位，这就意味着第二帧的计算方法是图片矩阵左乘一个矩阵，这个矩阵意思是向右移动0.5个单位。依次就计算出每一帧的状态了。

如果不仅向右移动而且向右移动的过程中还旋转了，那么再左乘一个旋转矩阵即可。

以后看到动画就不再是动画了 而是一个一个矩阵的相乘。

比如一个战士挥动手中的刀，刀在底层是用一个矩阵表示的，这个动画过程计算过程是先左乘一个移动矩阵再左乘一个旋转矩阵，假设这个过程是0.5秒完成的，帧率也是知道的，那么就可以计算出每一帧的结果，然后

调用引擎展示出每一帧的结果 最后就看到整体结果了。

写到这里 突然想到GPU内部帧缓冲的概念了，既然每个动画的每个帧的数据都是先计算好了 再调用引擎展示出来 那么先计算好的这些帧数据保存在哪里呢？ 就保存在帧缓存里面。

以上全是自己的理解。