在React Native中实现边框半径动画效果

Question

我无法在ReactNative图像中动画化borderRadius属性，似乎只有在动画完成时它才会重新渲染图像。它在动画开始时淡出，在动画完成时淡入。 这只发生在Android上； 在iOS上，动画播放正常。

我正在尝试通过动画化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>

- MatBee

Answer 1

没错！移除resizeMode属性即可解决您的问题。

- Sobol Roman

Answer 2

移除 resizeMode='contain' 解决了这个问题。

- MatBee