0

尝试使用 react-vr Box 和 Animated 组件使 Box 在 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>
    )
  }
};

谢谢您的帮助！

4

1 回答 1

0

我回答了我自己的问题：

对于 Y 轴上的动画，动画使用带有组件状态的“translateY”来制作动画：

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

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

目前，Animated 支持 Animated.View、Animated.Text、Animated.Image 和模型，方法是使用 Animated.createAnimatedComponent(model) 方法，其中 model 是指模型文件，例如 .obj。在我最初的问题中，最后一个不适用于 React-vr Box。

解决方案：我们可以将 <Box> 包裹在一个 <Animated.View> 组件中，并将动画应用到 <Animated.View>。

带有循环动画的动画 MovingBox 组件的代码：

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};
于 2017-11-07T16:40:44.447 回答