在动画中反应原生android崩溃

在Android 5.1上的物理设备上运行RN v0.40.0。我试图动画文本出现淡入和以下列方式向上滑动：在动画中反应原生android崩溃

export default class Example extends PureComponent { 
    constructor(props) { 
    super(props); 

    this.translate = new Animated.Value(-15); 
    this.fade = new Animated.Value(0); 
    } 

    componentWillReceiveProps() { 
    setTimeout(() => { 
     Animated.timing(this.translate, { 
     toValue: 0, 
     duration: 800, 
     easing: Easing.inOut(Easing.ease), 
     }).start(); 
     Animated.timing(this.fade, { 
      toValue: 1, 
      duration: 800, 
     easing: Easing.inOut(Easing.ease), 
     } 
    ).start(); 
    }, 150); 
    } 

    render() { 
    return (
     <View> 
     <Animated.View 
      style={{ 
      transform: [ 
       {translateY: this.translate}, 
      ], 
      opacity: this.fade 
      }} 
     > 
      <Text> 
       {this.props.text} 
      </Text> 
      </Animated.View> 
     </View> 
); 
}

后，我从开发菜单加载JS包，并转到该视图的应用程序崩溃，没有错误日志，有时显示Application ... stopped working，有时不显示。如果我再次从android菜单启动应用程序，它会加载好，仅在第一次崩溃。它肯定与动画有关，因为在我推出动画之前我没有崩溃。没有日志，没有线索，请给我一些建议，那可能是什么，我应该尝试什么以及我应该检查什么。谢谢。

顺便说一句，关于该视图与动画我有一个相当沉重的背景图像（〜400k）可能是一个问题？

UPD：我已经把范围缩小到它，当我试图并行运行的动画，无论是与setTimeout或Animation.parallel崩溃。可能是什么问题呢？

来源

2017-03-16 Tristan Tzara

不知道是什么导致崩溃，但使用Animated.parallel为我工作：

 Animated.parallel([ 
     Animated.spring(
      this.state.pan, { 
       ...SPRING_CONFIG, 
       overshootClamping: true, 
       easing: Easing.linear, 
       toValue: {x: direction, y: -200} 
      }), 
     Animated.timing(
      this.state.fadeAnim, { 
       toValue: 1, 
       easing: Easing.linear, 
       duration: 750, 
      }), 
     ]).start();

其中SPRING_CONFIG是一样的东西

var SPRING_CONFIG = {bounciness: 0, speed: .5};//{tension: 2, friction: 3, velocity: 3};

和平移和fadeAnim值在构造函数中设置此状态值为：

 pan: new Animated.ValueXY(), 
     fadeAnim: new Animated.Value(0),

动画查看为

<Animated.View style={this.getStyle()}> 
    <Text style={[styles.text, {color: this.state.textColor}]}>{this.state.theText}</Text> 
</Animated.View>

和的getStyle功能

getStyle() { 
    return [ 
      game_styles.word_container, 
      {opacity: this.state.fadeAnim}, 
      {transform: this.state.pan.getTranslateTransform()} 
     ]; 
    }

This tutorial帮我设置此...祝你好运！

来源

2017-03-16 20:54:19 kwishnu

非常感谢！非常有用的信息。但不幸的是，即使一次只动画一个元素，我也会崩溃... –

在文档中，他们将Animated.Value初始化为'this.state = {pan：new Animated.ValueXY（），};'--no在父母的争论;不知道你的负面价值是否是一个问题 – kwishnu

不，不幸的是这不是问题 –

在动画中反应原生android崩溃

回答

相关问题