旋转变换动画之前/之后的内容Flash（翻转卡片动画）

Question

我在iOS和Android上都看到了这种行为。你知道为什么在变换动画开始之后（也就在动画结束之前），卡片中的内容会闪烁（隐藏然后立即重新出现）。

仅当我执行rotate，rotateY或rotateX（未经测试的rotateZ）时才会发生这种情况。我不明白为什么。

这是截屏视频：

高品质的网站 - https://gfycat.com/SplendidCompetentEnglishpointer

低质量的GIF：

我的渲染代码是这样的：

        <View style={style}>
            <Animated.View style={[styleCommon, styleFace]}><Text>front</Text></Animated.View>
            <Animated.View style={[styleCommon, styleBack]}><Text>front</Text></Animated.View>
        </View>

我的风格是：

const styleCommon = {
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        elevation: 2,
        shadowRadius: 2,
        shadowOpacity: 0.4,
        shadowOffset: { height:1 },
        overflow: 'hidden',
        width: '100%',
        height: '100%',
        position: 'absolute',
        backgroundColor: '#FFFFFF'
}

    const styleFace = {
        opacity: anim.interpolate({ inputRange:[0,.5,.5,1], outputRange:[1,1,0,0] }),
        transform: [
            { rotateY:anim.interpolate({ inputRange:[0,1], outputRange:['0deg', '180deg'] }) }
        ]
    };
    const styleBack = {
        opacity: anim.interpolate({ inputRange:[0,.5,.5,1], outputRange:[0,0,1,1] }),
        transform: [
            { rotateY:anim.interpolate({ inputRange:[0,1], outputRange:['-180deg', '0deg'] }) }
        ]
    };

Answer 1

我发现它应该是 react-native 中transform的错误，显示从0.1 deg到0.4 deg以及-0.1 deg的视图到-0.4 deg。一切都在这种程度上消失了。

通过将起始度设定为0.1~0.4，可以很容易地证明这一点。

transform: [
    { rotateY:anim.interpolate({ inputRange:[0,1], outputRange:['0.1deg', '180deg'] }) }
]

快速解决这个问题可能会绕过百慕大学位：

const styleFace = {
  transform: [
    { rotateY:this.anim.interpolate({ inputRange:[0,0.01,0.01,1], outputRange:['0deg', '0deg', '0.4deg', '180deg'] }) }
  ]
};
const styleBack = {
  transform: [
    { rotateY:this.anim.interpolate({ inputRange:[0,0.99,0.99,1], outputRange:['-180deg', '-0.4deg', '0deg', '0deg'] }) }
  ]
};

结果：