使用新的动画API重复动画 [英] Repeat animation with new animated api

问题描述

React-native引入了新的 Animated API，我想制作一个循环动画，例如放大气泡，然后缩小并重复该过程。

但是我无法弄清楚。我试过写下面的代码

  class TestProject扩展了React.Component {
 
构造函数（ ）：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}， 
]，} 
] 
}> 
哈哈
< /Animated.Text> 
< / View> 
）; 
} 
 
} 
  

但效果不是很好。 / p>

任何建议都会受到赞赏。

解决方案

现在有循环动画可用：

  Animated.loop（
 Animated.sequence（[
 Animated.timing（this.state.animatedStartValue，{
 toValue：1，
持续时间：500，
延迟：1000 
}），
 Animated.timing（this.state.animatedStartValue，{
 toValue：0， 
持续时间：500 
}）
]），
 {
迭代次数：4 
} 
）.start（）
  

React-native introduce new Animated API, I want to make a loop animation such as a bubble scale up then scale down and repeat that progress.

However I can not figure it out. I've tried write some code like below

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>
    );
  }

}

but not works very well.

Any suggestion will be appreciate.

解决方案

There's now loop animation available:

Animated.loop(
  Animated.sequence([
    Animated.timing(this.state.animatedStartValue, {
      toValue: 1,
      duration: 500,
      delay: 1000
    }),
    Animated.timing(this.state.animatedStartValue, {
      toValue: 0,
      duration: 500
    })
  ]),
  {
    iterations: 4
  }
).start()

这篇关于使用新的动画API重复动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！