ReactVR에서 작동하지 않는 애니메이션

콘솔에서 오류가 보이지 않지만 애니메이션이 실행되지 않거나 내 장면이 너무 무거워서 애니메이션이 실행되기 전에 어딘가에 놓친 것 같습니다. 모델이 실제로로드되었습니다 ... 내 코드에서 누락 된 것이 있습니까?ReactVR에서 작동하지 않는 애니메이션

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> 
    ); 
    } 
};

출처

2017-11-17 Emmanuel Henri

것은 당신이 너무 대신 축에 의해 개별적으로 번역 설정해보십시오 :

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 } 
    ] 
}}

. 위에있는 모든 애니메이션 속성에 대해이 문제가 발생했습니다.

출처

2017-11-17 20:14:27 cidicles

잘 모르겠습니다. 여기에 당신의 권고를 따르고 있습니다. 내 번역 X 축은 이미 분리되어 있으며 애니메이션을 적용하려는 값입니다. 내 코드에 내가 추천 한 것을 보여줄 수 있습니까? –

죄송합니다 - 조금 불분명했습니다. 내 대답이 업데이트되었습니다. – cidicles

그게 고마워. –

ReactVR에서 작동하지 않는 애니메이션

답변

관련 문제