在一个元素上反应原生动画多个动画答案

【问题标题】：React Native Animated Multiple Animations on one element在一个元素上反应原生动画多个动画
【发布时间】：2020-03-23 13:48:36
【问题描述】：

有没有办法在一个动画视图上有多个动画，改变同一个 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>

【问题讨论】：

只有一个动画值。

标签： css reactjs react-native animation react-animated

【解决方案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>

【讨论】：

【解决方案2】：

如果您在 Parallel 上运行动画，请参阅Demo link

【讨论】：