在屏幕中心動畫框擴展（React Native Animated）

它是我第一次用反應本地的動畫庫進行動畫製作。是否可以在屏幕中心進行動畫製作？如果是這樣，我該怎麼做？在屏幕中心動畫框擴展（React Native Animated）

這是我的代碼如下：我的屏幕左上角基本上有一個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

來源

2017-10-05 jemmamariex3

您沒有更新身高。也許在你的情況下，你只能使用寬度，因爲它是方形的

來源

2017-10-05 21:46:47

在屏幕中心動畫框擴展（React Native Animated）

回答

相關問題