如何通过“animationend”javascript函数启动a-frame动画？
Posted
技术标签:
【中文标题】如何通过“animationend”javascript函数启动a-frame动画？【英文标题】：How to start an a-frame animation by an "animationend" javascript function? 【发布时间】：2018-09-09 13:39:41 【问题描述】：我从未使用过 html、javascript 或 a-frame，我想让三个 collada 文件依次可见然后不可见（如关键帧动画序列）并循环播放该动画。 除了循环动画的可能性之外，该代码有效。
<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”？ 我愿意提供任何帮助。
【问题讨论】：
另外，我推荐使用github.com/ngokevin/kframe/tree/master/components/animation 【参考方案1】：你需要通过animation.addEventListener('animationend', function)监听animationend事件
考虑到这样的设置，并通过element.emit('begin') 触发begin 事件：
<a-element id="element">
<a-animation id="animation"></a-animation>
</a-element>
查看我的fiddle
【讨论】：
感谢 Piotr Adam Milewski！成功了，“.element.emit('begin')”正是我一直在寻找的。span>以上是关于如何通过“animationend”javascript函数启动a-frame动画？的主要内容，如果未能解决你的问题，请参考以下文章