在Android 5.1上的物理设备上运行RN v0.40.0。我正在尝试为文本设置动画以淡入显示并按以下方式向上滑动:

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软件包并转到该 View 后,应用程序崩溃了,没有错误日志,有时显示Application ... stopped working,有时没有。如果我再次从android菜单中启动该应用程序,则它将加载正常,仅在第一次崩溃。绝对与动画有关,因为在介绍动画之前我没有崩溃。没有日志,没有线索,请给我一些建议,可能是什么,应该尝试什么,应该检查什么。谢谢。

顺便说一句,在带有动画的 View 上,我有一个非常重的背景图像(〜400k),这可能是个问题吗?

UPD :我已将其范围缩小到当我尝试使用setTimeoutAnimation.parallel并行运行动画时崩溃。可能是什么问题呢?

最佳答案

不知道是什么原因导致了崩溃,但是使用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};

在构造函数this.state中将pan和fadeAnim值设置为:
        pan: new Animated.ValueXY(),
        fadeAnim: new Animated.Value(0),

动画 View 为
<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帮助我进行了设置...祝您好运!

07-24 09:49
查看更多