如何通过“ animationend” javascript函数开始a帧动画？

Question

I never worked with html, javascript or a-frame and I want to make three collada files visible and then invisible one after another (like a keyframe animation sequence)and loop that animation. 我从来没有使用过html，javascript或a框架，我想使三个collada文件可见，然后一个接一个地不可见（例如关键帧动画序列），然后循环播放该动画。 That code works except for the possibility to loop the animation. 该代码有效，但可以循环播放动画。

<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe- 
extras.loaders.min.js"></script>
<script src="play-all-model-animations.js"></script>

<body>

<a-scene>

<a-assets>
<a-asset-item id="t1" src="1a.gltf"></a-asset-item>
<a-asset-item id="t2" src="2a.gltf"></a-asset-item>
<a-asset-item id="t3" src="3a.gltf"></a-asset-item>     
</a-assets>


<a-gltf-model id="model1" src="#t1" visible="false">
<a-animation id="anim1" attribute="visible" begin="1000"; dur="2000"; 
 to="false">
</a-animation>  
</a-gltf-model>

<a-gltf-model id="model2" src="#t2" visible="false">
<a-animation id="anim2"   attribute="visible" begin="2000"; dur="2000"; 
to="false">
</a-animation> 
</a-gltf-model>

<a-gltf-model id="model3" src="#t3" visible="false">
<a-animation id="anim3" attribute="visible" begin="3000";  dur="2000"; 
to="false">
</a-animation> 
</a-gltf-model>


<script>
anim1.addEventListener('animationend', function () {
model1.setAttribute('visible', 'true');
});
</script>

<script>
anim2.addEventListener('animationend', function () {
model1.setAttribute('visible', 'false');
model2.setAttribute('visible', 'true');
});
</script>

<script>
anim3.addEventListener('animationend', function () {
model2.setAttribute('visible', 'false');
model3.setAttribute('visible', 'true');

});
</script>

</a-scene>

</body>

I think I'll have to to start each animation in the "animationend function" instead of starting the animation with a "begin" time. 我想我必须在“ animationend函数”中开始每个动画，而不是在“开始”时间开始动画。 Does anybody have an idea how to start eg the animation id="anim1" by a javascript function? 有谁知道如何通过JavaScript函数启动例如动画id =“ anim1”？ I would appriciate any kind of help. 我会寻求任何帮助。

Answer 1

You need to listen for the animationend event via animation.addEventListener('animationend', function) 您需要通过animation.addEventListener('animationend', function)来监听animationend事件。

and fire the begin event by element.emit('begin') considering such setup: 并考虑以下设置，通过element.emit('begin')触发begin事件：

<a-element id="element">
   <a-animation id="animation"></a-animation>
</a-element>

check out my fiddle 看看我的小提琴

如何通过“ animationend” javascript函数开始a帧动画？

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-30 14:05:50

如何通过“ animationend” javascript函数开始a帧动画？

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-30 14:05:50

解决方案1
0 已采纳 2018-03-30 14:05:50