Android react native中的动画

我正在寻找的标志，以减少到一些默认的大小从实际大小和完成后，一些文字数据应该显示

但当我看到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>

const imagePos=this.state.scaleValue.interpolate({
输入范围：[0，1]，
输出范围：[500200]
})
const imageTop=this.state.scaleValue.interpolate({
输入范围：[0，1]，
输出范围：[400100]
})
返回

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

class.Component{
状态={
scaleValue：新的动画.Value（1），
}
componentDidMount（）{
动画。春天（
this.state.scaleValue，
{toValue:0.5}
).start（）；
}
render（）{
返回(
);
}
}

我通过使用多个动画实现了这一点

这是我的组件

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>

const imagePos=this.state.scaleValue.interpolate({
输入范围：[0，1]，
输出范围：[200150]
})
const imageTop=this.state.scaleValue.interpolate({
输入范围：[0，1]，
输出范围：[0.35*窗高，0.1*窗高]
})
const content=this.state.scaleValue.interpolate({
输入范围：[0，1]，
输出范围：[0.6*窗高，0]
})
返回
嗨，这是底部内容

为邮件定义高度和宽度，并将其设置为状态。然后在动画中更改高度/宽度状态。如果这没有帮助，我也许可以写一个例子。@abeikverdi你能帮我举个例子吗。我没能实现……我已经更新了我的代码。你能让它工作吗？或者你能更详细地解释一下，或者播放你想制作动画的视频吗我成功了……首先，徽标应该缩小尺寸，也应该向上移动，并平行地显示底部内容（最初底部内容不应可见）……这就是我被要求的……也许你应该在这里发布你的答案，以便所有经过的人都能看到它？：D