アニメーションがReactVRで動作していない

Question

コンソールのエラーは表示されませんが、アニメーションが実行されていないか、シーンが大きすぎてアニメーションが実行されないモデルが実際にロードされています...何か私のコードには欠けていますか？

import React from 'react'; 
import { asset, View, StyleSheet, Model, Animated } from 'react-vr'; 

const AnimatedModel = Animated.createAnimatedComponent(Model); 

export default class Loral extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     satelliteTransX: new Animated.Value(3), 
     satelliteRotY: -45, 
    }; 
    } 

    componentDidMount() { 
    this.state.satelliteTransX.setValue(3); 
    Animated.timing(
     this.state.satelliteTransX, 
     { 
     toValue: 10, 
     duration: 1000, 
     delay: 1000 
     } 
    ).start(); 
    } 

    render() { 
    return (
     <View> 
     <AnimatedModel 
      source={{ 
      obj: asset('/Loral-1300Com-obj/Loral-1300Com-main.obj'), 
      mtl: asset('/Loral-1300Com-obj/Loral-1300Com-main.mtl') 
      }} 
      style={{ 
       transform: [ 
       {translate: [this.state.satelliteTransX, 0, -10]}, 
       { scale: 0.01 }, 
       { rotateX: 30}, 
       { rotateY: this.state.satelliteRotY } 
      ] 
      }} 
     /> 
     </View> 
    ); 
    } 
}; 

Answer 1

ごので、代わりにこの軸によって個別に変換設定してみてください：

style={{ 
    transform: [ 
     {translate: [this.state.satelliteTransX, 0, -10]}, 
     { scale: 0.01 }, 
     { rotateX: 30}, 
     { rotateY: this.state.satelliteRotY } 
    ] 
}} 

はあなたのためにトリックを行う必要があり、この

style={{ 
    transform: [ 
     {translateX: this.state.satelliteTransX}, 
     {translateY: 0}, 
     {translateZ: -10}, 
     { scale: 0.01 }, 
     { rotateX: 30}, 
     { rotateY: this.state.satelliteRotY } 
    ] 
}} 

を試してみてください。上記のような配列で参照されているすべてのアニメーションプロパティでこの問題が発生しました。