A帧为函数中的对象设置动画



我正在a帧中创建一个场景,我想知道如何创建一些东西,当一个名为myFunction()的函数出现时,动画就会开始。如何做到这一点?当前代码:

<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 1.6 -5" animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>


  • 您希望在animation属性中使用startEvents
animation="startEvents: event-name; property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true"
  • 为元素添加一个类或id,这样函数就可以识别出要在命令中设置动画的元素
<a-box class="class_name" position="-1 1.6 -5" animation="startEvents: event-name; property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>
  • 通过函数中的名称发出startEvent
function animateBox() {
document.querySelector('.class_name').emit('event-name');
}

相关内容

  • 没有找到相关文章

最新更新