如何通过“动画结束”开始a帧动画。 javascript功能？ [英] How to start an a-frame animation by an "animationend" javascript function?
问题描述
我从未使用过html，javascript或a-frame，我想使三个collada文件可见，然后又一个又一个不可见（例如关键帧动画序列），然后循环播放该动画。
该代码有效，除了可以循环播放动画。
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. 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>
我想我必须在 animationend函数中启动每个动画，而不是启动动画具有开始时间。
是否有人知道如何开始，例如javascript函数制作的动画id = anim1？
我会寻求任何帮助。
I think I'll have to to start each animation in the "animationend function" instead of starting the animation with a "begin" time. Does anybody have an idea how to start e.g. the animation id="anim1" by a javascript function? I would appriciate any kind of help.
推荐答案
您需要收听 animationend 事件，通过 animation.addEventListener（'animationend'，function）
You need to listen for the animationend event via animation.addEventListener('animationend', function)
并触发 begin 事件由 element.emit（'begin'）考虑这样的设置：
and fire the begin event by element.emit('begin') considering such setup:
<a-element id="element">
<a-animation id="animation"></a-animation>
</a-element>
查看我的小提琴
这篇关于如何通过“动画结束”开始a帧动画。 javascript功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
