【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）