Repeat animation with new animated api

后端 未结 8 877
时光取名叫无心
时光取名叫无心 2021-01-31 14:40

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 n

8条回答
  •  无人共我
    2021-01-31 15:24

    Not sure if it's hacky, but I use this:

    Animated.spring(this.state.rotation, {
      toValue: 5,
      stiffness: 220, // the higher value, the faster the animation
      damping: 0.000001, // never stop wiggle wiggle wiggle
    }).start();
    

    It's creating spring animation that will never (technically, for a very very very long time) stop waving.

    For most of my cases it was enough. Also it has great performance as it does not require any JS tread action ever during animation.

    If eventually you'd like to stop it gracefully:

    Animated.spring(this.state.rotation, {
      toValue: 0,
      stiffness: 220, // the higher value, the faster the animation
      damping: 10, // never stop wiggle wiggle wiggle
    }).start();
    

    And it'll nicely 'slow down' until it stops.

提交回复
热议问题