动画反应母语

我一直在寻找的标志，以减少一些默认的尺寸与实际尺寸和一些文本数据应显示完成之后....动画反应母语

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

动画反应母语

回答

相关问题