动画在 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 }
    ]
 }}

这应该对你有用。对于像上面那样的数组中引用的所有动画属性，我都遇到过这个问题。

动画在 ReactVR 中不起作用

Animation not working in ReactVR

reactjs

react-360