AFrame Animation Start \ End Condition - PullRequest
Новая
       6

AFrame Animation Start \ End Condition

0 голосов
/ 08 октября 2018

Я пытаюсь заставить цилиндр начинаться и останавливать вращение при щелчке мыши, но я могу только заставить его начинать, а не останавливаться.Я не уверен, что еще будет работать?Когда я добавляю конечное условие, оно перестает работать все вместе.Мой вопрос: как я могу получить начальные и конечные условия для одного и того же ввода? 

<<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe- 
environment-component.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.5.0/annyang.min.js"> 
</script> 
<script src="/components/voice-commands.js"></script> 
</head>
<body>
<button>Go</button>
<a-scene>
    <a-assets>
        <img id="sky" src="sky2.0.jpg">
    </a-assets>



<a-camera position="0 1.6 0">
<a-cursor></a-cursor>
</a-camera>

    <a-box position="0 -2 0" color="grey" scale="30 2.5 20"></a-box>
    <a-cylinder id="center" position="17 0 0" color="grey" scale="4 4 4" 
rotation="0 0 90">
        <a-sphere position="0 -0.375 0" color="grey" scale="1 1 1" 
rotation="0 0 90"></a-sphere>
        <a-box position="8 0 0" color="grey" scale="15 0.25 1" rotation="-20 
0 0"></a-box>
        <a-box position="-3.5 0 6" color="grey" scale="15 0.25 1" 
rotation="-20 240 0"></a-box>
        <a-box position="-3.5 0 -6" color="grey" scale="15 0.25 1" 
rotation="-20 -240 0"></a-box>

        <a-animation attribute="rotation" begin="click" end="click" 
dur="20000" to="360 0 90" repeat="indefinite" easing="linear"></a-animation>
    </a-cylinder>



<a-sky src="#sky"></a-sky>

<a-cylinder position="0 -402 0" color="grey" scale="5 800 5" rotation="0 0 
0">


<a-entity id="annyang" annyang-voice-recognition></a-entity>







</a-scene>
</body>
</html>

1 Ответ

0 голосов
/ 08 октября 2018

Я бы бросил логику в отдельный a-frame component.

Имея такую ​​настройку: 

<a-cylinder anim-controller>
  <a-animation begin="start" end="stop" (...)></a-animation>
</a-cylinder>

При нажатии - переключать логическое значение, и в зависимости отЗначение запуска или остановки анимации: 

AFRAME.registerComponent("anim-controller", {
  init: function() {
    this.running = false
    this.animComp = document.querySelector("a-animation")
    this.el.addEventListener("click", (e) => {
      if (!this.running) {
        this.animComp.emit("start") // animation not running - start it
      } else {
        this.animComp.emit("stop") // animation running - stop it
      }
      this.running = !this.running // flip the flag
    })
  }
})

Простой - если анимация запущена - запустите ее.В противном случае остановите его.

Скрипка здесь .

...