如何在1.2.0 AFrame中制作0.5.0 AFrame的动画？ [英] How to make animation of 0.5.0 Aframe work in 1.2.0 Aframe?
本文介绍了如何在1.2.0 AFrame中制作0.5.0 AFrame的动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v1.16.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="duck1" position="1 0 -3">
<a-animation attribute="rotation" to="0 -360 0" repeat="indefinite" easing="linear" dur="30000"> </a-animation>
<a-entity color="#FF0000" scale="0.1 0.1 .1" position="0 0 1">
<a-animation attribute="rotation" to="0 360 0" easing="linear" dur="4000" begin="mouseenter"> </a-animation>
<a-box color="#FF0000" position="20 0 -10" change-color-on-hover="color: white" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
</a-entity>
<a-camera position="0 0.2 1.3"><a-cursor></a-cursor></a-camera>
</a-scene>
</body>
</html>动画在这里的工作方式，我想让它看起来类似于1.2.0版本的AFrame。我正在尝试使用同样的公式。以下是我在1.2.0AFrame中尝试做的事情。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"><html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity class="rota" id="duck1" color="#FF0000" scale="0.1 0.1 .1" position="2 0 -7" animation="property: rotation; to:0 -360 0; loop:true; easing:linear; dur:30000; pauseEvents: mouseenter; resumeEvents: " animation__mouseenter="property: rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
<a-box class="rota" color="#FF0000" position="20 0 -10" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
<a-camera position="0 1.2 1.3"><a-cursor objects=".rota" ></a-cursor></a-camera>
</a-scene>
</body>
</html>在第二个代码中，它一开始工作得很好，然后在一个特定的位置卡住了。有没有人可以帮我修复这个错误，使它看起来类似于0.5.0版AFrame中的代码。
推荐答案
以下是采用1.2.0语法的0.5.0代码
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="duck1" position="1 0 -3"
animation="property: rotation; to:0 -360 0; loop: true; easing:linear; dur:3000">
<a-entity color="#FF0000" scale="0.1 0.1 0.1" position="0 0 1"
animation="property:rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
<a-box color="#FF0000" position="20 0 -10" change-color-on-hover="color: white" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
</a-entity>
<a-camera position="0 0.2 1.3"><a-cursor></a-cursor></a-camera>
</a-scene>
</body>
</html>
此处出现故障： https://glitch.com/edit/#!/animation-example-0-5-to-12-0?path=index.html%3A1%3A0
我不确定我完全理解代码应该做什么--例如，有一个冲突处理程序与#ther Duck发生冲突，但没有#ther Duck实体。
1.2.0代码似乎与0.5代码的功能相同。
这篇关于如何在1.2.0 AFrame中制作0.5.0 AFrame的动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
