React Native - непрерывно анимированный вид дросселирует процессор на эмуляторе Android - PullRequest
Новая
       23

React Native - непрерывно анимированный вид дросселирует процессор на эмуляторе Android

0 голосов
/ 30 октября 2018

Я создал иконку, которая должна непрерывно пульсировать в моем приложении. Иногда на одном экране также может быть несколько «живых» значков, указывающих, что что-то живое.

liveicont

Проблема заключается в том, что при анимации значка это приводит к увеличению ЦП более чем на 500% для эмулятора Android (qemu-system-x86_64), и оно не становится ниже, пока анимируется значок.

Похоже, для 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, но, похоже, это также привело к очень высокой загрузке процессора.

Я только что обновился до react-native: 0.57.0 и react: 16.6.0, но это не помогло.

Заранее спасибо за любую помощь ?

...