我创建了一个应该在我的应用程序中不断脉动的图标。有时,同一个屏幕上还会出现多个“直播”图标,表示有什么东西是直播的。

问题是当图标动画时,这会导致 Android 模拟器 ( qemu-system-x86_64)的 CPU 上升到 500% 以上,并且只要图标动画,它就不会降低。
对于 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]),
}]}
/> …Run Code Online (Sandbox Code Playgroud)