Question

我正在开发一个React Native应用，我想在其中做里程表这样的数字动画。所以，我为此得到了一个CSS代码，但是我无法将CSS转换为React Native。这是我现在拥有的CSS代码：

export default class LuckySpin extends Component{
  render() {
    return (
          <View style={styles.odometer}>
            <View style={styles.digit}>
              <View style={styles.digitcontainerdigitthousand}>1 0 9 8 7 6 5 4 3 2 1</View>
            </View>
            <View style={styles.digit} style="width: 0.1rem;">
              <View class="digit-container"></View>
            </View>
            <View style={styles.digit}>
              <View style={styles.digitcontainerdigithundred}>0 9 8 7 6 5 4 3 2 1 0</View>
            </View>
            <View style={styles.digit}>
              <View style={styles.digitcontainerdigitten}>6 5 4 3 2 1 0 9 8 7 6</View>
            </View>
            <View style={styles.digit}>
              <View style={styles.digit-container-digit-one}>5 4 3 2 1 0 9 8 7 6 5</View>
            </View>
          </View>
          
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  p :{
    paddingTop: '3rem',
    textAlign: 'center',
    fontSize: '2.5vw',
  },
  odometer: {
    height: '1.5em',
    width: '100%',
    paddingTop: '1rem',
    color: '#000',
    textAlign: 'center',
    display: 'inline-block',
    background: '#fff',
    fontSize: '4vw',
    fontWeight: '500px',
  },
  digit: {
    margin: '-0.5vw',
    display: 'inline-block',
    height: '1.5em',
    width: '0.59em',
    overflow: 'hidden',
  },
  digitcontainerdigitthousand :{
    lineheight: '1.5em',
    animation: slide 5s infinite ease,
    
  },
  
  digitcontainerdigithundred :{
    lineheight: '1.5em',
    animation: slide 5s infinite  ease-out,
  },
  
  digitcontainerdigitten: {
    lineheight: '1.5em',
    animation: slide 5s infinite ease-in-out,
  },
  
  digitcontainerdigitone: {
    lineheight: '1.5em',
    animation: slide 5s infinite linear,
  },
  
  @keyframes slide : {
    0% {
      transform: translateY('-10em'),
    }
    40% {
      transform: translateY(0),
    }
      100% {
      transform: translateY(0),
    }
  }

});

css中的animation属性和关键帧现在引发错误。我该如何将其转换为原生动画以显示确切的动画？

Answer 1

根据我在React Native中的理解，您将<Animated.View/>与Animated.Timing()结合使用来制作动画。您可能要研究以下内容：https://facebook.github.io/react-native/docs/animations。

此外，请记住StyleSheet与CSS是不同的，因此上面可能没有keyframes。

您可能想要提供一个链接，该链接指向您确切想要实现的动画类型。

欢呼

转换CSS关键帧以响应本机

1 个答案: