我创建了一个图标,该图标应该会在我的应用程序中连续跳动。有时在同一屏幕上还会有多个“实时”图标,表示有东西在直播。
问题在于,在对图标进行动画处理时,这会导致Android仿真器(qemu-system-x86_64
)的CPU占用率提高500%以上,并且只要对图标进行动画处理,CPU的使用率就不会降低。
对于iOS来说,它看起来工作得很好。
这是我的代码:
class AnimatedRealtimeIcon extends React.Component<Props> {
animationPulse: new Animated.Value(0)
componentDidMount() {
Animated.loop(Animated.timing(this.animationPulse, {
toValue: 1,
duration: 2500,
useNativeDriver: true,
isInteraction: false,
})).start()
}
interpolateTo = outputRange => this.animationPulse.interpolate({
inputRange: [0, 1],
outputRange,
})
render() {
return (<View style={ styles.dotContainer }>
<View style={
[styles.dot,
{
position: 'absolute',
}
]}
/>
<Animated.View style={
[styles.dot, {
transform: [ {
scale: this.interpolateTo([0.5, 3]),
}],
position: 'absolute',
opacity: this.interpolateTo([1, 0]),
}]}
/>
</View>)
}
}
const styles = StyleSheet.create({
dotContainer: {
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 4,
},
dot: {
backgroundColor: '#9BA4D2',
alignItems: 'center',
justifyContent: 'center',
height: 6,
width: 6,
borderRadius: 4
},
})
外面是否有人对如何优化将在React Native中连续显示的视图有任何建议?我也尝试过使用gif,但似乎也导致CPU使用率很高。
我刚刚升级到react-native: 0.57.0
和react: 16.6.0
,但这没有帮助。
预先感谢您的帮助