使用新的动画api重复动画

发布时间：2020-12-15 20:55:39 所属栏目：百科来源：网络整理

导读：React-native引入了新的动画API,我希望制作一个循环动画,例如气泡缩放,然后按比例缩小并重复该进度. 但是我无法弄明白.我试过写下面的代码 class TestProject extends React.Component { constructor(): void { super(); this.state = { bounceValue: new An

React-native引入了新的动画API,我希望制作一个循环动画,例如气泡缩放,然后按比例缩小并重复该进度.

但是我无法弄明白.我试过写下面的代码

class TestProject extends React.Component {

  constructor(): void {
    super();
    this.state = {
      bounceValue: new Animated.Value(0),v: 1,};
  }

  componentDidMount() {
    this.state.bounceValue.setValue(1.5);

    let animation = Animated.timing(this.state.bounceValue,{
      toValue: this.state.v,});

    setInterval(() => {
      animation.stop();

      if (this.state.flag) {
        this.state.v = 0.5;
        this.state.bounceValue.setValue(0.5);
      }
      else {
        this.state.v = 1.5;
        this.state.bounceValue.setValue(1.5);
      }

      animation.start();
    },5000);

  }

  render(): ReactElement {
    return (
      <View style={styles.imageContainer}>
        <Image
          style={styles.image}
          source={{uri: 'http://image142-c.poco.cn/best_pocoers/20130517/91062013051716553599334223.jpg'}}
        />
        <Animated.Text
          style={[
            styles.test,{transform: [
              {scale: this.state.bounceValue},],}
          ]
          }>
          haha
        </Animated.Text>
      </View>
    );
  }

}

但效果不是很好.

任何建议将不胜感激.

我使用序列方法传递一组动画来循环然后重复该函数.

//this.state.animatedStartValue = 0;

function cycleAnimation() {
  Animated.sequence([
    Animated.timing(this.state.animatedStartValue,{
      toValue: 1,duration: 500,delay: 1000
    }),Animated.timing(this.state.animatedStartValue,{
      toValue: 0,duration: 500
    })
  ]).start(() => {
    cycleAnimation();
  });
}

如果我自己切换该动画它会淡入/淡出,但是我将它分层放在基座上以模仿活动状态或热点样式按钮

<TouchableOpacity>
    <Animated.Image
      source={activeImageSource}
      style={this.state.animatedStartValue}}
    />
    <Image source={nonActiveImageSource}
    />
  </TouchableOpacity>

React Native Sequence Documentation

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!