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

例如，您可以使用“scale”缩小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();

这是我的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>

反应原生动画

2 个答案: