React Native-连续动画视图限制了Android模拟器上的CPU

时间:2018-10-30 07:16:01

标签: javascript android reactjs react-native animation

我创建了一个图标,该图标应该会在我的应用程序中连续跳动。有时在同一屏幕上还会有多个“实时”图标,表示有东西在直播。

liveicont

问题在于,在对图标进行动画处理时,这会导致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.0react: 16.6.0,但这没有帮助。

预先感谢您的帮助

0 个答案:

没有答案