如何使用A帧同步对象上的动画？
如何使用A帧同步对象上的动画？
提问于 2019-03-20 04:05:05
我在index.html中有以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Alchem Figher!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<!-- Scripts -->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="jquery.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-text value="Rational Bonding Presents" position="-3 7 -10" color="#EF2D5E">
<a-text value="Alchem Fighter" height="30" width="20" position=".5 -.5 0" color="#02e8f4"></a-text>
</a-text>
<a-sphere id="proton" position="0 2.5 -6" radius=".05" color="#EF2D5E">
<a-sphere id="eclouds1e1" radius=".53" color="#02e8f4" opacity=".4">
<a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >
<a-animation attribute="position" dur="250" from=".53 0 0" to="-.53 0 0" direction="alternate" repeat="indefinite"></a-animation>
<a-animation attribute="geometry.radius" dur="125" from=".01" to=".53" direction="alternate" repeat="indefinite"></a-animation>
</a-entity>
</a-sphere>
<a-sky src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Earth_Western_Hemisphere.jpg"></a-sky>
</a-scene>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
</html>圆环id为：s1e1
在这里，<a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >，它有两个附加的动画。一个用于从左向右移动，另一个用于扩展和收缩。
问题：
我希望这些动画同步，以便圆环在中间扩展，并在结束时收缩。它代表了一个电子围绕一个氢原子中的一个质子旋转的可视化，但我不知道如何接近它。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-20 12:46:52
我正在输入响应，建议使用animation组件(包含在0.9.0核心中)，而不是a-animation (已弃用，并在0.9.0中删除)，这是我在一般实践中仍然建议的，但我意识到动画实际上仍然不同步。
我假设这是由于以下任何原因造成的：
- 极短间隔(
dur)。设置得越高，计时问题就越不明显。 - 由于动画属性的目标不同而导致的开销差异，例如，原始属性与属性(使用幕后的
setAttribute)。 - IIRC，循环设置为幕后的
setTimeout或setInterval。与其依赖这一点，不如禁用循环并通过发出定时事件来触发这些动画，这样就可以保证它们同时执行。您可以使用可调节的tick处理程序、setTimeout或setInterval.
创建一个自定义组件来执行此操作
我还建议使用linear或easeInOutQuad进行缓动，因为默认设置仅在一个方向上缓动，这可能会导致不希望的效果。
无论哪种方式，您都可能希望将此作为错误提交到A-Frame代码库：https://github.com/aframevr/aframe/issues/new
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55249179
复制相关文章
相似问题