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中不起作用

1 个答案: