在一个元素上反应本机动画多个动画

Question

有没有办法在一个动画视图上有多个动画，改变相同的css属性？

this.expandAnimation = new Animated.Value(50);
this.shrinkAnimation = new Animated.Value(200);

Animated.sequence([
  Animated.timing(this.expandAnimation, {
    toValue: 200,
    duration: 1000
  }),
  Animated.timing(this.shrinkAnimation, {
    toValue: 50,
    duration: 1000
  })
]),

  <Animated.View style={[styles.box, { width: this.ExpandAnimation }]}> // What value to bind to width?
    <View>
    </View>
  </Animated.View>

Answer 1

费德昆回答。您使用单个动画值。

this.expandAndShrinkAnimation = new Animated.Value(50);

Animated.sequence([
  Animated.timing(this.expandAndShrinkAnimation, {
    toValue: 200,
    duration: 1000
  }),
  Animated.timing(this.expandAndShrinkAnimation, {
    toValue: 50,
    duration: 1000
  })
]),

  <Animated.View style={[styles.box, { width: this.expandAndShrinkAnimation }]}> // What value to bind to width?
    <View>
    </View>
  </Animated.View>

Answer 2

如果你运行并行动画看到这个Demo link

在一个元素上反应本机动画多个动画

React Native Animated Multiple Animations on one element

css

reactjs

react-native

animation

react-animated