2017-01-18 3 views
1

Я не могу анимировать свойство borderRadius в файле ReactNative Image, кажется, что он только повторно отображает изображение по мере завершения анимации. Он исчезает при запуске анимации и исчезает при завершении анимации. Это происходит только на Android; на iOS анимация воспроизводится правильно.Анимация радиуса границы в React Native

Я пытаюсь анимировать круг расширяется в квадрат с помощью анимации borderRadius:

constructor(props) { 
    super(props); 
    this.state = { 
     borderRadius: new Animated.Value(ALBUM_CIRCLE_DIAMETER /2) 
    }; 
} 

_zoomIn =() => { 
    Animated.timing(
     this.state.borderRadius, 
     { 
      toValue: 0, 
      duration: ZOOM_ANIMATION_DURATION_MS, 
      easing: Easing.linear 
     } 
    ).start() 
} 

И разметку:

<Animated.Image 
    style={[ 
     styles.albumArtCircle, 
     { width: this.state.albumArtWidth }, 
     { height: this.state.albumArtHeight }, 
     { borderRadius: this.state.borderRadius }, 
    ]} 
    resizeMode='contain' 
    source={require('../images/sampleAlbum.jpg')}> 
</Animated.Image> 

ответ

2

Право! Удалить свойство resizeMode. Это решит вашу проблему.

0

Удаление resizeMode='contain' сделал эту работу.

Смежные вопросы