react native中使用Animated实现三张图片动态旋转效果

react native中使用Animated实现三张图片动态旋转效果

• • 效果示例图
  • ���例代码

    效果示例图

    示例代码

    import React, {useEffect, useRef} from 'react';import {Animated, StyleSheet, View} from 'react-native';import {pxToPd} from '../../common/js/device';const TestShowCard = () => {  const rotationValue = useRef(new Animated.Value(0)).current;  const firstCardRotation = '0deg';  const secondCardRotation = rotationValue.interpolate({    inputRange: [0, 1],    outputRange: ['0deg', '-15deg'],  });  const thirdCardRotation = rotationValue.interpolate({    inputRange: [0, 1],    outputRange: ['0deg', '15deg'],  });  useEffect(() => {    Animated.timing(rotationValue, {      toValue: 1,      duration: 1000,      useNativeDriver: true,    }).start();    return () => {};  }, []);  return (                                                                    );};const styles = StyleSheet.create({  container: {    flex: 1,  },  dynCard: {    width: pxToPd(174),    height: pxToPd(203),    position: 'relative',    marginTop: pxToPd(200),    marginLeft: pxToPd(100),  },  cardItem: {    width: '100%',    height: '100%',    borderColor: 'blue',    borderWidth: pxToPd(1),    borderStyle: 'solid',    position: 'absolute',    backgroundColor: 'white',  },});export default TestShowCard;