对一个元素执行本机动画多个动画

Question

是否有办法在单个Animated View上具有多个动画，更改相同的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

[Federkun回答。您使用单个动画值。

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>