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>

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

1 个答案: