如何动画图像在一帧中以圆圈移动?

时间:2017-09-09 09:31:06

标签: javascript html aframe webvr

我一直试图将图像移动到一个完美的圆圈但却无法完美地完成。我已经编码了一个方框以旋转方形路径。代码如下。



<a-box id="box" position="-1 0.5 -3" src="images/pic2.jpg" onclick="loaddoc()" visible="true">
            <a-animation attribute="position" fill="both" from="-1.0 0.5 -3" to="-2 0.5 -3" dur="5000"></a-animation>
            <a-animation attribute="position" fill="both" from="-2 0.5 -3" to="-2 0.5 3" dur="5000" delay="5000"></a-animation>
            <a-animation attribute="position" fill="both" from="-2.0 0.5 3" to="-1 0.5 3" dur="5000" delay="10000"></a-animation>
            <a-animation attribute="position" fill="both" from="-1.0 0.5 3" to="-1 0.5 -3" dur="5000" delay="15000"></a-animation>
        </a-box>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

这完全是关于亲子关系的 在父实体中放置具有位置偏移的子项,并旋转父项。

&#13;
&#13;
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<a-scene>
  <a-entity position="0 5 -5">
    <a-box color="red" position="0 -1 0"></a-box>
    <a-animation attribute="rotation" dur="4000" fill="forwards" to="0 0 360" repeat="indefinite"></a-animation>
  </a-entity>
</a-scene>
&#13;
&#13;
&#13;