【WebVR教程翻译】一步一步教你如何制作A-frame动画效果

原文：Learning A-Frame: How to do Animations
作者：Alexandra Etienne
译者：大田

欢迎来到A-Frame课堂！这次我们将通过讲解一个codepen.io示例，学会如何使用这个框架制作各种动画。

动画是所有伟大的3D创作的关键部分，它能第一时间抓住我们的视线，把场景鲜活地呈现出来。

使用A-frame创建动画非常简单。先将<a-animation>标签放在要动起来的对象或实体内，接着再指定动起来时需要改变的属性。通过以上步骤，可以让实体按照我们想要的方式动起来，这时可以连续地改变实体的各种属性，例如实体的位置，旋转角度，大小，甚至颜色。

接下来，我们就一个一个来看看这些动画效果是怎样实现的吧。

位移动画

上图中，我们构建了一个VR场景，场景里有一个盒子实体。现在将一个animation标签作为该盒子实体的子项，放置在盒子中，这样就为该盒子绑定好了一个动画效果。

现在为这个动画效果设置属性position （了解更多关于动画使用属性，请参阅此文），这样就可以通过设置以下变量来改变盒子实体的属性了：

• dur：动画的持续时间（以毫秒为单位），该值值越大，实体移动速度越慢
• from：移动的起点，在上图的例子中，设置为x轴方向上-5象素
• to：移动的终点，在上图的例子中，设置为x轴方向上5象素
• repeat：动画的重复次数，在上图的例子中，设置为indefinite（无期限），所以动画会一直重复

其余的代码只是添加一个淡黄色的天空，调整相机的位置。

最终效果：

旋转动画

本例和之前的例子类似，动画作为子项与盒子实体绑定，但不同的是，这次设置的属性为rotation。dur变量和上例一样；repeate变量仍设置为indefinite；因为我们只需要盒子在y轴上以360度旋转就够了，所以from变量本次不需要定义，只需要设置to变量就行。

现在来看看easing变量，它用于指定你想要的盒子如何移动，或是动画以什么样的模式进行（稍后会看到更多）。本例中easing变量设置为linear（线性），这使得旋转在动起来的过程中运转速度保持不变。

最终效果：

变色动画

在本例中，我们将结合前两个动画，并添加一些代码（见上面的截图），这样就能在执行位移动画和旋转动画时改变实体的颜色。

现在，我们创建一个新的<a-animation>标签并修改其参数，设置属性material.color，将盒子从蓝色变为红色。 dur和repeat保持不变。

盒子动起来时，能看到变色的效果，3个动画（位移，旋转和变色）同时运转良好。

最终效果：

文章到这里还没结束呢……

缩放动画

缩放动画可是我的最爱！可以用它让实体变大变小，甚至创造出时髦的动画。在下一个例子中，我们将来学习让实体像心脏一样怦怦跳动，这比基本动画稍难一些，但我仍想与大家分享酷炫的效果。

如上图所示，这次animation的属性为scale，dur设置为1000（所以它的移动速度比以前的方盒子要快）；实体将从x，y，z轴的1象素开始，转到2象素；repeate变量保持为indefinite（无期限）。

此外，我们将把easing改为ease-in-out-circ（逐渐放松）——这是众多种easing效果之一，您可以访问这里查看不同easing的可视化效果。

ease-in-out-circ（逐渐放松）效果即是动画开始缓慢，中间加速，而后平滑减速。

这里还启用了direction变量，它指定在from和to之间动画化的方式。本例中direction设置为alternate-reverse（交替反复）时，意味着在奇数周期，动画从from开始，到to结束；在偶数周期，动画从to开始，到from结束。
了解更多direction变量用法请看这里。

现在，我们得到了心脏抽吸的效果！

最终效果：

如你所见，动画中实体是地球，它由我通过为球体添加纹理图像构造而成。地球后面的场景是一个简单的天空盒（要做出这些效果很简单，请点击链接查看）快来写几行代码制作自己的地球吧，记得一定要做出动画效果哟！

相关VR教程：【WebVR教程翻译】超简单！用A-frame快速打造你的VR网站

又到了插播广告的时间：）如果你喜欢我的文章，想学习更多VR知识，欢迎关注我的微信公众号：差不多一个意思（搜索微信公众号：chabuduoyigeyisi）