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;