球体をアニメーション化する（回転）

Question

私は最初のアニメーションを作成しようとしています。球体を回転させたいだけです。

私はアニメーションのAPIを見て、私は次のエラーを取得する：

Transform with key of "rotateY" must be a string or number: {"rotateY":0}

私のアニメーションオブジェクトが反応し-VRで解析することができなかった場合と同じように。ここで

は、私が試したものです：

import React from 'react'; 

import { 
    Animated, 
    AppRegistry, 
    asset, 
    Pano, 
    Sphere, 
    View, 
} from 'react-vr'; 

const sphereProps = { 
    radius: 0.5, 
    widthSegments: 20, 
    heightSegments: 12 
}; 

export default class Test extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     viewPoint: new Animated.Value(0) 
    }; 
    } 

    turnLeft =() => { 
    Animated.timing(
     this.state.viewPoint, 
     { 
     toValue: -20, 
     duration: 3000 
     } 
    ).start(); 
    } 

    turnRight =() => { 
    Animated.timing(
     this.state.viewPoint, 
     { 
     toValue: 20, 
     duration: 3000 
     } 
    ).start(); 
    } 

    render() { 
    return (
     <Animated.View> 
     <Pano source={asset('background.jpg')}/> 

     <Sphere 
      { ...sphereProps } 
      style={{ 
      color: 'blue', 
      transform: [ 
       { translate: [0, 0, -4] }, 
       { rotateY: this.state.viewPoint } 
      ], 
      }} 
     /> 

     </Animated.View> 
    ); 
    } 

    componentDidMount() { 
    this.turnLeft(); 
    } 
}; 

AppRegistry.registerComponent('Test',() => Test); 

コンポーネントの生成時にエラーが発生し、私は#turnLeftメソッドを呼び出していない場合でも。

このアニメーションの回転をどのようにするのか知っていますか？

Answer 1

あなたが見ているエラーは、まだアニメーション用に設定されていない要素にアニメーション要素を割り当てようとしていることです。モデルを含むビューをアニメートしたり、モデルのアニメーションコンポーネントを作成したりすることができます。

const AnimatedModel = Animated.createAnimatedComponent(Model);