Анимация AFRAME - Как повторно использовать анимацию

#javascript #aframe

Вопрос:

Я хочу нерегулярную анимацию, подобную этой (это в случае капли воды):

Drip

ничего

Drip

ничего

Есть ли способ сделать это или зациклить действительно длинную анимацию капания?

Ответ №1:

Как насчет создания пользовательского компонента для управления анимацией?

Если вы используете анимационный компонент — вы можете указать имя события, которое запустит анимацию:

 <a-sphere id="driplet" animation="...; startEvents: drip">

Теперь вы хотите «поставить в очередь» анимацию: воспроизвести, подождать, воспроизвести, воспроизвести, подождать. Итак, давайте сделаем это, используя фиксированный интервал либо для отправки drip события, либо для ожидания:

 AFRAME.registerComponent("foo", {
  init: function() {
    // the mentioned "queue"
    const animationQueue = ["drip", "", "drip", "drip", ""]

    // grab the animations interval
    var interval = this.el.getAttribute("animation").dur

    // we'll use this to know where we are in the queue
    var animationIdx = 0;

    // set the event cycle
    var intervalIdx = setInterval(e => {
       // emit the event from the queue
       this.el.emit(animationQueue[animationIdx])

       // set the animationIdx to the 'next' item in queue
       if (animationIdx < animationQueue.length - 1)
         animationIdx  ;
       else
         animationIdx = 0;
    }, interval);      
  }
})

Проверьте это в этой скрипке

Ответ №2:

Один из самых простых способов, которые я нашел для создания таких вещей, как «отслеживаемая» анимация, — это использование этого стабильного репозитория

https://github.com/protyze/aframe-alongpath-component

Настройте свои капли воды вдоль траектории и анимируйте их с помощью ваших собственных фиксированных координат x, y, z. Измените мои x, y, z для лошади на вертикальные. Если вы не хотите сделать что-то более сложное, я считаю, что это один из простых способов.

 <head>
    <script src="aframe-master/dist/aframe-v1.0.4.min.js"></script>
    <script src="aframe-alongpath-component-master/dist/aframe-alongpath-component.min.js" ></script>
    <script src="aframe-curve-component-master/dist/aframe-curve-component.min.js"></script>
</head>
...

<body>
<a-assets>
        <a-asset-item id="horse" src="assets/gltf/Horse_Free.glb" shadow="receive: false"></a-asset-item>

...
    <a-curve id="tracA" >
        <a-curve-point position="0 1 8" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="5 1 6" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>  
        <a-curve-point position="7 1 0" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="5 1 -5" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="0 1 -7" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="-6 1 -5" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>  
        <a-curve-point position="-8 1 0" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="-6 1 6" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="0 1 8" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
    </a-curve>

    <a-entity id="sittingDuckA" gltf-model="#horse" alongpath="curve:#tracA;loop:true;dur:12000;rotate:true" scale="" position="-4.27 1 -6" shadow="receive:false" rotation="-24 -90 90"></a-entity>

</scene>
</html>