A-Frame中文教程

动画(Animations)

参考阅读: aframe-animation-component

在A-Frame中,我们可以通过给实体添加一个<a-animation>子元素来实现动画:

作为一个入门例子,我们来定义一个沿Y轴旋转的轨道运行例子:

<a-entity>
<a-entity position="5 0 0"></a-entity>
<a-animation attribute="rotation"
dur="10000"
fill="forwards"
to="0 360 0"
repeat="indefinite"></a-animation>
</a-entity>

A-Frame动画在线演示(轨道旋转)

属性(Attributes)

下面是动画属性的概述:

属性 描述 缺省值
attribute 想添加动画的属性,要指定一个组件属性,使用componentName.property语法(例如,light.intensity)。 rotation
begin 动画开始前等待的事件名称。 ‘’
delay 动画开始前的延时(毫秒)或等待的事件名称。 0
direction 动画的方向(在fromto之间)。取值为如下之一:alternate, alternateReverse, normal, reverse. normal
dur 动画持续时间(毫秒)。 1000
easing 动画的缓动函数。有很多可供选择的方法。 ease
end 暂停动画前等待的事件名称。 ‘’
fill 确定动画未激活(或播放)时的效果。取值为如下之一:backwards, both, forwards, none. forwards
from 起始值 当前值
repeat 重复次数,或无限循环indefinite 0
to 终止值,必须指定。 没有缺省值。

给不同类型的属性添加动画

A-Frame的动画系统可以给不同类型的属性添加动画。

vec3属性

A-Frame拥有标准的三维向量vec3组件(也就是,position, rotation, and scale)。这些组件三个分量组成:X, Y, 和Z。我们可以传递三个以空格分开的数字给fromto属性,就像在实体上定义的那样。这种情况下,动画系统将假设我们在对一个vec3的值进行动画处理。

比如,如果我们想给一个实体添加动画,从一点移动到另外一点,我们可以使用position组件。

<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>

布尔值(Boolean)属性

A-Frame有一个接受布尔值的标准组件。所谓布尔值的“动画”就是在每个动画周期倒置布尔值(0和1互换)。

例如,我们可以定义一个动画,5秒后切换实体是否可见。

<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>

数字(Numeric)属性

我们也可以给数字属性添加动画特性。例如,我们可以改变光照强度。

<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>

颜色(Color)属性

我们可以对具有颜色类型的任何组件属性进行动画处理。例如,我们可以把盒子从白色变成红色。

<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>

组件属性

我们可以激活多属性组件的某个属性。我们使用点语法来选择组件属性: componentName.propertyName.

例如,为了使圆锥体的顶部半径变大,我们可以通过geometry.radiusTop来选择radiusTop值。

<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>

起始(Begin)

begin属性定义动画什么时候开始启动。

这可以是一个代表等待毫秒数的数字(number),或者是一个要等待的事件名称。例如,我们可以定义一个实体缩放前等待2秒的动画。

<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>

或者,我们可以定义一个动画,在实体淡出前等待父元素触发名为fade的事件。

<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>
// Trigger an event to begin fading.
document.querySelector('#fading-cube')。emit('fade');

方向(Direction)

direction属性定义起始点之间的动画方向(比如是从起点到终点还是反之)。

当我们定义一个交替方向时,动画就会像溜溜球一样的在fromto取值之间来回移动。交替方向仅当我们重复动画时才有作用。

描述
alternate 在偶数周期,动画方向为从fromto。在奇数周期,反之。
alternate-reverse 在奇数周期,动画方向为从fromto。在偶数周期,反之。
normal 动画方向为fromto
reverse 动画方向为tofrom

缓动(Easing)

easing属性定义了动画的缓动函数。默认为ease。和CSS3动画类似,有很多缓动函数可以使用。

比如linear表示线性过渡。基础的缓动函数为easeease-in, ease-out,和ease-in-out

然后还有更多的缓动函数组。上述基本缓动函数可以作为每个缓动函数组的前缀。缓动函数组包括:cubic, quad, quart, quint, sine, expo, circ, elastic, back,和bounce.

例如,cubic缓动功能组包括: ease-cubic, ease-in-cubic, ease-out-cubic, ease-in-out-cubic.

填充(Fill)

fill属性定义动画未激活时的效果。我们可以把fill当作在每个动画循环之前或之后在实体上所设置的值。下面是fill的一些可能的取值和效果:

数值 描述
backwards 在动画开始之前,设置起动值为from
both 结合向后填充和向前填充的效果。
forwards 动画完成后,最终值将保持在to。这个是fill的默认值。
none 动画开始之前,设置起动值为初始值。在动画结束后,重置为初始值。

重复(Repeat)

repeat属性定义动画的重复次数。Repeat可以是一个数字,每次动画循环减一直到0,此时动画结束,或者我们可以设置repeatindefinite,这样动画将一直持续直到动画被手动删除或停止。

事件(Events)

<a-animation>元素会发射一些事件:

事件名称 描述
animationend 动画结束时发出。如果动画有重复,则Repeat值倒计数到0时发出。如果无限重复则不发出该事件。
animationstart 动画开始启动时立即发出。