本機動畫

Question

我正在尋找徽標，以將徽標從實際尺寸減少到一些默認尺寸，並在完成后顯示一些文本數據。

但是，當我看到facebook網站時，沒有發現我將徽標的大小從默認值縮小的地方。

我應該如何做到這一點

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

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

除了減小圖像的大小外，我還希望圖像移到頂部，以便在底部底部留一些空間，我想在動畫完成時顯示其他文本...

對不起，如果我錯了..幫助我一些文檔或參考

我努力了：

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>

Answer 1

例如，您可以使用“縮放”來縮小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},  
          ]
        }}
      />
    );
  }
}

Answer 2

我通過使用多個動畫實現了

這是我的componentdidmount

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

這是我的聚會

   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>