小编cjr*_*vik的帖子

React Native - Continuously animated view throttles CPU on android emulator

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

现场图标

问题是当图标动画时,这会导致 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)

javascript animation android reactjs react-native

6
推荐指数
0
解决办法
261
查看次数

标签 统计

android ×1

animation ×1

javascript ×1

react-native ×1

reactjs ×1