動畫反應母語

我一直在尋找的標誌，以減少一些默認的尺寸與實際尺寸和一些文本數據應顯示完成之後....動畫反應母語

但是當我看到Facebook網站沒有我發現從默認縮小標誌的大小。

我應該如何實現這一

Animated.timing(
this.spinValue, 
{ 
    toValue: 1, 
    duration: 4000, 
    easing: Easing.linear 
}

我沒有得到如何改變此圖像的大小...

隨着降低圖像的大小我想要的圖像移動頂部，底部留有一定空間，在那裏，我想展現的動畫完成其他文字...

很抱歉，如果我是wrong..help我與一些文檔或引用

我曾嘗試過：

const imagePos = this.state.scaleValue.interpolate({ 
     inputRange: [0, 1], 
     outputRange: [500, 200] 
    }) 
    const imageTop = this.state.scaleValue.interpolate({ 
     inputRange: [0, 1], 
     outputRange: [400, 100] 
     }) 

    return <View> 
    <Animated.Image style={{ height:imagePos ,width:imagePos ,top : imageTop }} resizeMode={'contain'} source={require('../assets/new_images/logo1.png')} /> 

    </View>

來源

2016-12-05 santhosh

定義您的消息的高度和寬度並將其設置爲狀態。然後在動畫中更改高度/寬度狀態。如果這沒有幫助，我可以寫一個例子。 – abeikverdi

@abeikverdi你能幫我一個例子。我無法實現....我已更新我的代碼 – santhosh

我通過使用多個動畫

這是我componentdidmount

Animated.timing(
     this.state.scaleValue, 
     {toValue: 1 ,duration : 1000 ,easing : Easing.ease ,delay:0} 
    ).start();

實現了這個，這是我rendet

const imagePos = this.state.scaleValue.interpolate({ 
     inputRange: [0, 1], 
     outputRange: [200, 150] 
    }) 
    const imageTop = this.state.scaleValue.interpolate({ 
     inputRange: [0, 1], 
     outputRange: [0.35*windowHeight, 0.1*windowHeight] 
     }) 
     const content = this.state.scaleValue.interpolate({ 
      inputRange: [0, 1], 
      outputRange: [0.6*windowHeight, 0] 
     }) 

    return <View style={{flex:1,alignItems:'center'}}> 
    <Animated.Image style={{ height:imagePos ,width:imagePos ,top :imageTop}} resizeMode={'contain'} source={require('../assets/new_images/main_screen.png')} /> 
    <Animated.View style={{flex:1,alignItems:'center',top : content}}> 

    <View><Text>Hi this is bottom content</Text></View> 
    </Animated.View> 
    </View>

來源

2016-12-11 10:05:21 santhosh

例如，您可以使用「縮放」縮小componentDidMount上的圖像大小。如果我的理解是否正確，這是你想要的

class Playground extends React.Component { 
    state = { 
    scaleValue: new Animated.Value(1), 
    } 

    componentDidMount() { 
    Animated.spring(       
     this.state.scaleValue,     
     {toValue: 0.5} 
    ).start();         
    } 

    render() { 
    return (
     <Animated.Image       
     source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}} 
     style={{ 
      flex: 1, 
      transform: [       
      {scale: this.state.scaleValue}, 
      ] 
     }} 
     /> 
    ); 
    } 
}

來源

2016-12-05 05:40:54

我已更新我的問題，所以我不得不知道動畫的完成也.... – santhosh

你是否得到它的工作？或者，你可以更詳細地解釋還是展示你想要製作動畫的視頻？：D –

我得到它的工作.....首先標誌應該減少大小，也應該向上移動和平行底部內容（最初的底部內容應該不可見）出現.....多數民衆贊成什麼我是requierd .... .. – santhosh

動畫反應母語

回答

相關問題