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

87357660 2019-06-25

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

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

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

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

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

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

位移动画

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

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

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

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

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

最终效果:

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

旋转动画

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

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

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

最终效果:

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

变色动画

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

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

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

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

最终效果:

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

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

缩放动画

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

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

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

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

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

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

现在,我们得到了心脏抽吸的效果!

最终效果:

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

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

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


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

相关推荐