Question

在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包并转到该视图应用程序崩溃时没有错误日志，有时显示Application ... stopped working，有时不显示。如果我再次从Android菜单启动应用程序，它加载正常，只是第一次崩溃。它肯定与动画有关，因为在我介绍动画之前我没有崩溃。没有日志，没有线索，请给我一些建议可能是什么，我应该尝试什么，我应该检查什么。感谢。

不过，在那个有动画的视图中我有一个相当沉重的背景图像（〜400k）可能会有问题吗？

UPD ：当我尝试使用setTimeout或Animation.parallel并行运行动画时，我已将其缩小至崩溃状态。可能是什么问题？

Answer 1

不确定导致崩溃的原因，但使用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};

和pan和fadeAnim值在构造函数中设置this.state值为：

        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帮助我解决了这个问题......祝你好运！

在动画期间对设备上的本机安卓程序进行反应

1 个答案: