在 React Native 中设置边框半径动画

Question

我无法在 ReactNative Image 中为 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>

Answer 1

删除 resizeMode='contain' 使这项工作成功。

Answer 2

对了！删除 resizeMode 属性。这将解决您的问题

在 React Native 中设置边框半径动画

Animating the border radius in React Native

javascript

reactjs

react-native

react-native-android