画面中央のアニメーションボックス展開（React Native Animated）

Question

反応ネイティブのアニメーションライブラリでアニメーションを初めて作成しました。画面中央でアニメートすることは可能ですか？もしそうなら、どうしたらいいですか？

これは私のコードです。 私は画面の左上隅に60x60のボックスがあり、基本的に画面の1/2と幅の1/2を表示しています。水平に約150ピクセル広げたい。問題は、ボックスが画面の中央で拡大していないことです。

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    View, 
    Animated, 
    Dimensions, 
    Easing 
} from 'react-native'; 

const {width,height} = Dimensions.get('window') 
export default class App extends Component { 

    constructor(){ 
     super() 

     this.state = { 
      width: new Animated.Value(60),//Animated.Value/ValueXY used to hook up animation attributes, also for single values 
      height: new Animated.Value(60), 
      animateXY : new Animated.ValueXY({x:0,y:0})//for vectors 
     } 
    } 

    componentWillMount(){ 
     //called when an instance of a component is being created and inserted into the DOM 
     Animated.sequence([ 
      //function where we add the ending results 
      Animated.timing(
       this.state.animateXY, 
       { 
       toValue: {x:0, y:height/2}, 
       duration: 2000 
      }), 
      Animated.timing(
       this.state.animateXY, 
       { 
        toValue: {x:width/2, y:height/2}, 
        duration: 2000, 
       }), 
      Animated.timing(
       this.state.width, 
       { 
        toValue: 150, 
        duration: 3000 
       }), 

     ]).start() 

    } 
    render() { 
    return (
     <View> 
      <Animated.View 
       style={ 
        { 
         width: this.state.width, 
         height:this.state.height, 
         backgroundColor:"teal", 
         position:'absolute', 
         top: this.state.animateXY.y, 
         left: this.state.animateXY.x, 

        } 
       } 
      /> 
     </View> 

    ); 
    } 
} 

ありがとうございました！ Jemma

Answer 1

身長を更新していません。たぶん、あなたの場合は、正方形なので幅を使うことができます