如何在 React-VR 中使用 Animation with Shape 基元，例如 Box？错误："Cannot add property _tracking, object is not ext

Question

试图使盒子在使用React-VR框和动画组件的Y坐标上上下移动。

目前，我得到了

无法添加属性_ tracking，对象不是可扩展的

错误。

代码下面：

使用Animated.createAnimatedComponent(Box);

组件"立方体"

import React from 'react';
import {
  Box,
  Animated,
} from 'react-vr';
const AnimatedBox = Animated.createAnimatedComponent(Box);
class Cube extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      y: new Animated.Value(0)
    }
    this.animate = this.animate.bind(this);
  }
  componentDidMount () {
    this.animate();
  }
  animate () {
    Animated.sequence([
      Animated.timing(
        this.state.y,
        {
          toValue: 3,
          duration: 200
        }
      ),
      Animated.timing(
        this.state.y,
        {
          toValue: 0,
          duration: 200,
        }
      )
    ]).start();
  }
  render() {
    const { width, height, depth, x, y, z } = this.props.cube;
    return (
      <AnimatedBox
        dimWidth={width}
        dimDepth={depth}
        dimHeight={height}
        style={{
                        transform: [{translate: [x, this.state.y, z]}],
                        color: 'white'
                    }}
      />)
  }
}
export default Cube;

index.vr.js渲染方法通过立方体道具传递到立方体组件：

  render() {
    const cube = { 
      width: 1, 
      height: 1, 
      depth: 1, 
      x: 0, 
      y: 0, 
      z: -5 
    };
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <View>
          <Cube cube={{...cube}} />);
        </View>
      </View>
    )
  }
};

谢谢您的帮助！

Answer 1

我回答了自己的问题：

用于在Y轴上进行动画，动画使用组件状态使用"翻译"来动画：

不正确： style={{transform: [{translate: [x, this.state.y, z]}]}}

正确：style={{ transform: [{translate: [x, y, z]}, {translateY: this.state.y}]}}

当前，Animation支持Animated.View，Animated.Text，Animated.Image和模型，使用Animation.CreateAnimatedComponent（Model），其中模型是指诸如.OBJ之类的模型文件。在我的最初问题中，最后一个不适用于react-vr框。

解决方案：我们能够包装＆lt;盒子>在AN＆LT内；Animated.View>组件，然后将动画应用于＆lt;Animated.View>。

具有循环动画的动画移动箱组件的代码：

import React, {Component} from 'react';
import {
  View,
  Animated,
  Box
} from 'react-vr';
class MovingBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      y: new Animated.Value(0)
    };
    this.animate = this.animate.bind(this);
  }
  componentDidMount () {
    this.animate();
  }
  animate () {
    Animated.sequence([
      Animated.timing(
        this.state.y,
        {
          toValue: 3,
          duration: 2000
        }
      ),
      Animated.timing(
        this.state.y,
        {
          toValue: 0,
          duration: 2000,
        }
      )
    ]).start(this.animate);
  }

  render () {
    const {x, y, z, width, height, depth} = this.props.cube;
    return (
      <Animated.View
      style={{
        transform: [
          {translate: [x, y, z]},
          {translateY: this.state.y}
        ]
      }}>
        <Box
        dimWidth={width}
        dimDepth={depth}
        dimHeight={height}
        style = {{
          transform: [
            {translate: [0, 0, 0]},
          ]
        }} />
      </Animated.View>
    );
  }
}
export {MovingBox};