a-frameを使ってアニメーションをスムーズにズームイン/アウトする方法

Question

私はa-frame docs on animationsで読んでいます。 >to - - 私はエンティティにをクリックすると、それは逆方向、すなわち前方にして、スムーズにfromスケールするために、私は希望>from

を多分そこに簡単な解決策があるが、私は今のところ得ている最も近いです

<a-animation 
attribute='scale' 
dur='500' 
from='1 1 1' 
to='3 3 3' 
fill='backwards' 
begin='click'> 
</a-animation> 

fill='backwards'が戻ってアニメーションが終了した後from状態にアニメーションをもたらしますが、それはそうスムーズに行いません：この使用。 >to - - >from

---

fromをアニメーション化するための簡単な方法はありますか？ docsから

<script src='https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js'></script> 
 

 
<a-scene> 
 
    <a-entity camera look-controls> 
 
    <a-entity geometry='primitive: ring;radiusOuter: 0.10;radiusInner: 0.05;' material='color: red;' position='0 0 -3' cursor='maxDistance: 30; fuse: false'> 
 
    </a-entity> 
 
    </a-entity> 
 

 
    <a-entity geometry='primitive:box' position='0 0 -5'> 
 
    <a-animation attribute='scale' dur='500' from='1 1 1' to='3 3 3' fill='backwards' begin='click'></a-animation> 
 
    </a-entity> 
 
</a-scene>

Answer 1

：ここ

は以下のサンプルである 方向 - アニメーションの方向を決定します。代替を使用
アニメーションが開始位置に戻るように、1回繰り返すようにします。

<script src='https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js'></script> 
 

 
<a-scene> 
 
    <a-entity camera look-controls> 
 
    <a-entity geometry='primitive: ring;radiusOuter: 0.10;radiusInner: 0.05;' material='color: red;' position='0 0 -3' cursor='maxDistance: 30; fuse: false'> 
 
    </a-entity> 
 
    </a-entity> 
 

 
    <a-entity geometry='primitive:box' position='0 0 -5'> 
 
    <a-animation attribute='scale' dur='500' direction='alternate' from='1 1 1' to='3 3 3' begin='click' repeat='1'></a-animation> 
 
    </a-entity> 
 
</a-scene>