在動畫中反應原生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崩潰

回答

相關問題