cjr*_*vik 6 javascript animation android reactjs react-native
我创建了一个应该在我的应用程序中不断脉动的图标。有时,同一个屏幕上还会出现多个“直播”图标,表示有什么东西是直播的。

问题是当图标动画时,这会导致 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]),
}]}
/>
</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
},
})
Run Code Online (Sandbox Code Playgroud)
有没有人对如何优化将在 React Native 中连续动画的视图有任何建议?我也尝试使用 gif,但似乎这也会导致 CPU 使用率非常高。
我刚刚升级到react-native: 0.57.0,react: 16.6.0但这没有帮助。
在此先感谢您的帮助
| 归档时间: |
|
| 查看次数: |
261 次 |
| 最近记录: |